Netrunning: septiembre 2014

martes, 30 de septiembre de 2014

PHP (04) Lectura de datos desde WEB (04) Casillas de selección

Vamos a analizar ahora como se recogen los datos de las casillas de selección, esos cuadraditos que hay en muchos formularios:
perro
gato

Recoger este tipo de datos ya tiene una dificultad mayor a la que hemos visto hasta ahora, aunque no deja de ser la misma idea.
Primero se debe de implementar el formulario html:

<html>
<head>
</head>
<body>
 <form method="post" action="miphp.php">
  <p>Indique en que formato tiene experiencia</p>
  <input name="check1" type="checkbox" value="back">back-end
  <input name="check2" type="checkbox" value="front">front-end
  <input type="submit" value="enviar">
  <input type="reset" value="borrar">
 </form>
</body>
</html>

Como podemos observar en este tipo de formulario no hay nada nuevo, tan solo el tipo de input.
A continuación debemos de preparar nuestro archivo php, pero hay que tener en cuenta que hay que controlar si los checkboxs están o no seleccionados para ello, debemos de comenzar a trabajar de nuevo con las estructuras de control de flujo if, de lo contrario nos daría error:

<html>
<head>
</head>
<body>
 <?php
  echo '<h2>Respuesta de PHP</h2>';
  echo '<h3>Usted ha elegido:</h3>';
  if (isset($_REQUEST['check1'])){
   echo '<p>' . $_REQUEST['check1'] . '</p>';
  }if (isset($_REQUEST['check2'])){
   echo '<p>' . $_REQUEST['check2'] . '</p>';
  }
  
 ?>
</body>
</html>

En este ejemplo hemos utilizado la función isset(var) dentro de la condición del if, ya que de este modo controlamos que este o no seleccionado el checkbox. (Para más información de la funcion isset, pincha aquí)

La dificultad aunque creciente sigue siendo muy pequeña, tan solo hay que tener en cuenta que el valor que se recoge es el value del input, que es el que se muestra, y que en los checkbox se pueden seleccionar varias opciones, por lo que para muchas opciones como podrían ser sexo, tramos de edad, rentas, elecciones binarias o excluyentes no nos valdría, para ello se utilizán los radiobuttons, que veremos en el siguiente articulo.

lunes, 29 de septiembre de 2014

Tabla periódica de los elementos HTML5

Hace unos días vi en Internet que comenzó a correr una tabla periódica de los elementos HTML5, pero cuando intente acceder a ella, su creador Josh Duck, la había retirado.
No obstante aun pude acceder a parte de su código por githud, y ví que podía mejorarla en algunos sentidos, además de añadirle alguna etiqueta como <main>
Me puse manos a la obra y he pasado tres días trabajando en ella casi sin parar y añadiéndole algunos detalles:

Inclusión de la etiqueta main
Introducción de códigos de muestra donde esta resalatada la etiqueta de estudio en cuestión
El resultado del código en la medida de lo posible
Descripciones al castellano de la definición de todas y cada una de las etiquetas que componen la tabla
Enlaces en la medida de lo posible a Mozilla en español.

Me ha resultado bastante tedioso, pero el resultado creo que ha sido bastante bueno, y aunque la autoría de la criatura y de la idea no ha sido mía si puedo decir que me siento muy agusto con mi aportación.
Para acceder a la web haz click sobre la imagen!!!!

PHP (04) Lectura de datos desde WEB (03) Áreas de texto

Hasta ahora hemos aprendido a recoger los datos desde una campo de texto, ¿pero qué sucederá si queremos tomarlos de un área de texto? en principio la respuesta es muy similar, ya que nuestro archivo html donde se encuentra el formulario ser el siguiente:

<html>
<head>
</head>
<body>
 <form method="post" action="miphp.php">
  <p>Introduzca el nombre de los lenguajes que conoce:</p>
  <textarea name="data" cols="50" rows="5">
1.
2.
3.
4.
5.
  </textarea>
  <input type="submit" value="enviar">
  <input type="reset" value="borrar">
 </form>
</body>
</html>

Como podemos ver no tiene nada de especial y tan solo cambia nuestro "input" que se convierte en un textarea.

Ahora en nuestro archivo miphp.php es donde se recogen los datos del texarea y se muestran en pantalla:

<html>
<head>
</head>
<body>
 <?php
  echo "<h2>Respuesta de PHP</h2>";
  $texto=$_POST["data"];
  echo str_replace("\n", "<br>", $texto);
 ?>
</body>
</html>

Si observamos el código vemos que en la instrucción echo aparece str_replace(...) esta función de php funciona de la siguiente forma:
str_replace(search, replace, subject)
Es decir que en este caso busca los saltos de línea y los cambia por <br> en la variable texto.

Respuesta de PHP

1.HTML
2.CSS
3.JavaScript
4.PHP
5.Java

Esto no da el resultado en el mismo formato que ha sido introducido en el textarea, aunque en muchos casos no nos hará falta. Por ejemplo, imaginemos un textarea en el que se solicita una breve descripción de algo. En ese caso, sería suficiente con poner:

echo $texto;

De este modo se obtendría el texto y se escribiría todo seguido.

viernes, 26 de septiembre de 2014

PHP (04) Lectura de datos desde WEB (02) Campos de texto, diferencias entre get y post

Tal y como vimos en el anterior articulo a modo de muestra, vamos a tener dos archivos, el primero es nuestro index.html donde aparece el formulario:

<form method="get" action="miphp.php">
 Nombre:
 <input name="nombre" type="text">
 .
 .
 <input type="submit" value="enviar">
 <input type="reset" value="borrar">
</form>

En el segundo llamado miphp.php es donde se encuentra la respuesta cuando se hace click sobre el botón de enviar:

<html>
<head>
</head>
<body>
 <?php
  $nombre=$_GET["nombre"];
  echo 'Hola ' . $nombre;
 ?>
</body>
</html>

Esto funciona correctamente, pero si nos fijamos en la URL tenemos un problema y es que aparece el campo de texto que hemos introducido dando una URL similar a esta:

http://localhost/miphp/miphp.php?nombre=Pepe

Si estuviéramos hablando de un login, un número de cuenta corriente o algo similar nuestra clave o campo aparecería en la URL cosa que no queremos, pero solucionar esto es realmente sencillo, tan solo hace falta cambiar el método get a post, y la variable superglobal $_GET por $_POS, quedando nuestros archivos de la siguiente forma:
index.html

<form method="post" action="miphp.php">
 Nombre:
 <input name="nombre" type="text">
 .
 .
 <input type="submit" value="enviar">
 <input type="reset" value="borrar">
</form>

Y miphp.php

<html>
<head>
</head>
<body>
 <?php
  $nombre=$_POST["nombre"];
  echo 'Hola ' . $nombre;
 ?>
</body>
</html>

Cuando se hace esto vemos que la URL una vez que se hace click en enviar es mucho más simple y que no contiene los datos a la vista (Esto da seguridad frente a miradas indiscretas, y aunque no se crea hay multitud de casos de asalto y fallos de seguridad que se deben a un ojo por encima del hombro del usuario).

http://localhost/miphp/miphp.php

El método post envía los datos en los encabezados HTTP y no en la URL

jueves, 25 de septiembre de 2014

PHP (04) Lectura de datos desde WEB (01) Configuración de la web

Ahora que ya sabemos los fundamentos básicos de PHP, ya podemos dirigirnos a comunicarlo con nuestras webs, recogiendo datos desde formularios.
Para ello utilizamos la etiqueta html <form></form>, conocida por todos los desarrolladores web, pero en este caso vamos a añadirle el atributo method, el cual puede ser entre otros post o get, lo cual dice como debe de enviar los datos, pero hace falta decirle a nuestra web donde debe enviarlos, para eso es necesario otro atributo: action, el cual enviará los datos a la dirección (URL), ya sea absoluta o relativa que le pongamos.

<form method="get" action="miphp.php">
.
.
.
</form>

De hecho si tenemos el script de php dentro del código, podemos omitir el atributo action, ya que cuando hagamos click en enviar llamará a la misma dirección que esta haciendo la llamada.

Esto nos hace considerar que debemos de incluir botones como enviar o resetear, ampliando nuestro formulario de la siguiente forma:

<form method="get" action="miphp.php">
 .
 .
 .
 <input type="submit" value="enviar">
 <input type="reset" value="borrar">
</form>

Ahora ya podemos introducir nuestros campos del formulario como por ejemplo el nombre:

<form method="get" action="miphp.php">
 Nombre:
 <input name="nombre" type="text">
 .
 .
 <input type="submit" value="enviar">
 <input type="reset" value="borrar">
</form>

En el atributo name hemos puesto "nombre" que será como se recoja el dato.
Ahora bien según hayamos enviado los datos como get o post podemos recoger esos datos de forma inicial con las matrices superglobales $_GET o $_POST respectivamente o incluso con $_REQUEST que engloba a los dos metodos.

Creando el archivo miphp.php de la siguiente forma:

<html>
<head>
</head>
<body>
 <?php
  $nombre=$_GET["nombre"];
  echo 'Hola ' . $nombre;
 ?>
</body>
</html>

Este ejemplo nos muestra un formulario que nos pide el nombre y al hacer click en enviar nos recoge el nombre y nos saluda por pantalla. Esto es equivalente a un hola mundo y como ejemplo inicial esta bien trabajar a partir de aquí, pero en los próximos artículos iremos viendo como ir haciendo cosas más complejas, con diferentes tipos de inputs...

miércoles, 17 de septiembre de 2014

PHP (03) Funciones (08) Retorno de errores

En muchos casos las funciones definidas de PHP devuelven un valor FALSE, este también podemos hacerlo nosotros utilizando la función die para que se nos muestre un mensaje de error.

Por ejemplo, imaginemos que tenemos una tienda y queremos crear un programa que nos diga cuanto tenemos que dar de cambio a un cliente.
Lo primero que tenemos que hacer es comprobar que el dinero del cliente es superior al precio del producto, y de no ser así enviará un mensaje de error.

<?php
 $precio = 35;
 $pago = 40;
 $pago2 = 20;
 echo '<p><b>Primera llamada donde precio es 35 y pago 40</b></p>';
 cambio($precio, $pago) or die ('<p>El pago es menor que el precio</p>');
 echo '<p><b>Segunda llamada donde precio es 35 y pago 20</b></p>';
 cambio($precio, $pago2) or die ('<p>El pago es menor que el precio</p>');
 
 function cambio($precio, $pago)
 {
  if ($precio < $pago){
   $cambio = $pago - $precio;
   echo '<p>El cambio es de: ' . $cambio .'</p>';
   return true;
  } else {
   return false;
  }
 }  
?>

Es muy importante introducir tanto el return true como el return false para que el programa se comporte como queremos.
De hecho si analizamos lo que nos muestra por pantalla:

Primera llamada donde precio es 35 y pago 40
El cambio es de: 5
Segunda llamada donde precio es 35 y pago 20
El pago es menor que el precio

vemos que cuando se llama a la función cambio, esta primero comprueba que el precio sea menor que el pago para decir lo que hay que dar de cambio, devolviendo true, pero si el precio es mayor que el pago devuelve un valor false que active or die en la llamada, mostrando la imposibilidad de realizar la operación.

Con esto terminamos el uso de la funciones y en el próximo tema vamos a estudiar la lectura de datos en páginas web...

PHP (03) Funciones (07) Includes, desarrollo de una web a partir de funciones

PHP permite crear archivos de inclusión, es decir incluidos en en nuestro archivo principal y de ese modo tener acceso a las funciones que se encuentran en los archivos incluidos de forma simple y sencilla, de la siguiente forma:

<?php
 include ('funciones.php');
 ...


Con funciones se planean mejor nuestras webs

De este modo estamos introduciendo el archivo funciones dentro de nuestro archivo y sus funciones están totalmente accesibles.

Naturalmente esto puede tener muchas utilidades y limpian mucho el código, pudiendo utilizarse como las clases de java, siendo mucho más claras nuestras funcionalidades, como por ejemplo tener un archivo php que cree tenga una función que cree tablas (tablas.php) a través de argumentos, que hagan operaciones aritméticas...

Pero hay algo dentro del desarrollo web, que desde ya va a ser uno de nuestros objetivos como iréis viendo, donde esto puede mostrar su mayor potencia. Por ejemplo, cuando hacemos una web con HTML y vamos a añadir un elemento a nuestra barra de navegación siempre tenemos que ir introduciéndolo archivo tras archivo para que los cambios se vean en todas las páginas. Pero con las funciones solo hace falta modificar la función donde se encuentra nuestra barra de navegación que es la que leen todas nuestras páginas.

martes, 16 de septiembre de 2014

PHP (03) Funciones (06) Funciones anidadas

Puede ocurrir que queramos introducir funciones dentro de otras, algo que puede ser muy útil, pero que tiene un problema, es que las funciones como las variables existen solo en los ámbitos donde están definidas de modo que si queremos llamar a una función que se encuentra dentro de otra no podremos hacerlo desde el exterior si esta no ha sido leída primero o nos dará un error. Del mismo modo ocurre con funciones dentro de expresiones condicionales como los if.
Esto es debido a que PHP es un lenguaje interpretado, es decir, que el código no es accesible hasta que lo maneja el interprete, por ello las funciones anidadas son inaccesibles hasta que se cargan como vemos en este ejemplo:

<?php
 echo '<p>Llamando a la función interior</p>';
 interior();
 
 function exterior()
 {
  echo '<p>Esta es la función exterior</p>';
  function interior()
  {
   echo '<p>Esta es la función interior</p>';
  }
 }  
?>

Lo cual nos da como resultado:
Llamando a la función interior
Fatal error: Call to undefined function interior() in C:\xampp\htdocs\miphp\cadenas.php on line 10

Este error fatal tiene lugar por que la función exterior() no ha sido cargada antes de llamar a la función que tiene dentro, pero como vemos en este ejemplo, si se llama a la función que encapsula a la interior antes de invocarla, el interprete sí la reconoce:

<?php
 echo '<p>Llamando a la función exterior</p>';
 exterior();
 echo '<p>Llamando a la función interior</p>';
 interior();
 
 function exterior()
 {
  echo '<p>Esta es la función exterior</p>';
  function interior()
  {
   echo '<p>Esta es la función interior</p>';
  }
 }  
?>

Como vemos en este ejemplo hemos llamado a la función exterior antes de invocar a la interior y en el resultado nos muestra que entonces sí se puede llegar a ella.
Llamando a la función exterior
Esta es la función exterior
Llamando a la función interior
Esta es la función interior

Podríamos pensar que si la llamada a la función interior tiene lugar desde la función exterior, entonces sí se puede acceder a ella, pero esto es relativo a donde se haga la llamada, ya que si se hace antes de que el interprete haya leído la función nos dará un error:

<?php
 echo '<p>Llamando a la función exterior</p>';
 exterior();
 
 
 function exterior()
 {
  echo '<p>Esta es la función exterior</p>';
  echo '<p>Llamando a la función interior desde la exterior</p>';
  interior();

  function interior()
  {
   echo '<p>Esta es la función interior</p>';
  }
  
 }  
?>

Cuyo resultado es:
Llamando a la función exterior
Esta es la función exterior
Llamando a la función interior desde la exterior
Fatal error: Call to undefined function interior() in C:\xampp\htdocs\miphp\cadenas.php on line 15

Pero si llamamos a a interior() después de que la función haya sido leída por completo:

<?php
 echo '<p>Llamando a la función exterior</p>';
 exterior();
 
 
 function exterior()
 {
  echo '<p>Esta es la función exterior</p>';
  echo '<p>Llamando a la función interior desde la exterior</p>';
  

  function interior()
  {
   echo '<p>Esta es la función interior</p>';
  }
  interior();
 }  
?>

Entonces tenemos el resultado esperado:
Llamando a la función exterior
Esta es la función exterior
Llamando a la función interior desde la exterior
Esta es la función interior

Con estos ejemplos podemos observar como funciona el lenguaje interpretado, cargado por secciones según vayan haciendo falta, y de este modo ir ahorrandonos errores.

lunes, 15 de septiembre de 2014

PHP (03) Funciones (05) Variables estaticas

El problema que tienen las funciones es que siempre se les hace una llamada las variables se reinicializán a sus valores por defecto a menos que estan seas globales, pero puede interesarnos guardar el valor de algunas variables y que estas no sean globales. De este modo aparecen las variables estáticas, que son aquellas que mantienen el valor que van adquiriendo a lo largo de la ejecución del programa.
Para este fin se utiliza la palabra static, y como veremos a continuación es realmente sencillo de utilizar:

<?php
 echo '<p>El valor actual de la variable $contar es: ' . contar() . '</p>';
 echo '<p>El valor actual de la variable $contar es: ' . contar() . '</p>';
 echo '<p>El valor actual de la variable $contar es: ' . contar() . '</p>';
 echo '<p>El valor actual de la variable $contar es: ' . contar() . '</p>';

 function contar()
 {
  static $contar;
  $contar++;
  return $contar;
 }  
?>

Cuyo resultado es:
El valor actual de la variable $contar es: 1
El valor actual de la variable $contar es: 2
El valor actual de la variable $contar es: 3
El valor actual de la variable $contar es: 4

De esta manera se pueden controlar por ejemplo en numero de ventas, de peticiones a un servidor, o cualquier cosa que nos pueda ser útil, sin necesidad de variables globales.

domingo, 14 de septiembre de 2014

PHP (03) Funciones (04) Ambitos de las variables y acceso a datos globales

Los ámbitos de las variables son aquellas zonas donde se puede acceder a una variable, en las funciones, todas las variables que se declaran en su interior son invisibles para el resto del código, es decir, que si yo declaro una variable dentro de una función, esta variable será invisible para otras funciones y para el flujo principal del código.
Además, debido al ámbito de las variables, como programadores, no tendremos que preocuparnos por la coincidencia de nombres dentro del código ya que las variables pueden tener el mismo nombre dentro de diferentes funciones y tener un valor diferente en cada caso.
Todo esto lo vamos a ver en el siguiente ejemplo:

<?php
 $valor1=22;
 $valor2=33;
 echo '<p>El valor de $valor fuera de la función es: ' . $valor1 . '</p>';
 control();
 echo '<p>El valor de $valor1 fuera y después de llamar a la función es: ' . $valor1 . '</p>';

 function control()
 {
  $valor1=11;
  echo '<p>El valor de $valor1 dentro de la función es: ' . $valor1 . ' y no entra en conflicto</p>';
 }

?>

Que nos da como resultado:
El valor de $valor fuera de la función es: 22
El valor de $valor1 dentro de la función es: 11 y no entra en conflicto
El valor de $valor1 fuera y después de llamar a la función es: 22

Vemos como las variables no entran en conflicto y tienen sus propios valores según en el ámbito en el que se encuentren, de hecho, ¿que pasaría si llamásemos a la variables $valor2 dentro de la función?
Se podría pensar que como $valor2 esta declarado en el flujo central, las funciones tendrían acceso a ella, pero no es así, para ello se necesita que sean datos globales de lo contrario dará un error como este:

Notice: Undefined variable: valor2 in C:\xampp\htdocs\miphp\cadenas.php on line 17

Pero ¿como se accede a datos globales? para acceder a datos globales es tan sencillo como introducir la palabra global delante del nombre de la variable en la función como si se estuviera declarando la variable:

global $valor2;

Lo cual nos dejaría un código así:

<?php
 $valor1=22;
 $valor2=33;
 echo '<p>El valor de $valor fuera de la función es: ' . $valor1 . '</p>';
 control();
 echo '<p>El valor de $valor1 fuera y después de llamar a la función es: ' . $valor1 . '</p>';

 function control()
 {
  $valor1=11;
  echo '<p>El valor de $valor1 dentro de la función es: ' . $valor1 . ' y no entra en conflicto</p>';
   global $valor2;
   echo '<p><b>El valor de $valor2 dentro de la función es: ' . $valor2 . ' y esta tomando el valor global</b></p>';
 }

?>

El cual nos daría el siguiente resultado:
El valor de $valor fuera de la función es: 22
El valor de $valor1 dentro de la función es: 11 y no entra en conflicto
El valor de $valor2 dentro de la función es: 33 y esta tomando el valor global
El valor de $valor1 fuera y después de llamar a la función es: 22

De este modo como se puede ver que la función tiene acceso a la variable de forma global.

sábado, 13 de septiembre de 2014

PHP (03) Funciones (03) Valores de retorno

Cuando comenzamos a hablar de funciones, dijimos que las funciones pueden tener un valor de retorno, el cual aun no hemos incluido en nuestras funciones pero que ahora si vamos a ver...

Retorno de datos

Supongamos que queremos calcular el cuadrado de un numero, pero no queremos que la función muestre ese valor, cosa recomendable, y tampoco queremos hacerlo por referencia, de modo que necesitamos un valor de retorno, de la siguiente forma:

En la medida de lo posible hay que evitar que las funciones muestren valores por pantalla.

<?php
 $valor =3;
 $cuadrado = cuadrado($valor);

 echo '<p>El cuadrado de ' . $valor . ' es ' . $cuadrado .  '</p>';

 function cuadrado($numero)
 {
  $numero *= $numero;
  return $numero;
 } 
?>

Vemos como aparece la variable $cuadrado cuyo valor hace la llamada a la función y esta hace un return con el resultado el cual se guarda como la variable $cuadrado que podemos utilizar luego libremente.

Retorno de matrices

Consideremos que queremos devolver una matriz. La forma de hacerlo es tan sencilla como hacerlo con los datos.

Supongamos que tenemos una función llamada creaArray que recibe como argumento un valor, ese valor es el número de índices que tendrá nuestro array creado en la función y el cual devuelve para poder trabajar con él.

Esto es tan fácil como el siguiente código:

<?php
 $datos = creaArray(3);
 echo "Esta es la primera matriz:<br>";
 print_r($datos);
 echo "<br>";
 $datos_2 = creaArray(4);
 echo "Esta es la segunda matriz:<br>";
 print_r($datos_2);

 function creaArray($número)
 {
  for ($contador_ciclos = 0; $contador_ciclos < $número; $contador_ciclos++){
   $matriz[] = $contador_ciclos;
  }
  return $matriz;
 }
?>

Aquí vemos como se crean dos arrays llamando a la misma función y como esta crea las variables devolviéndolas del mismo modo que si fueran datos.

viernes, 12 de septiembre de 2014

PHP (03) Funciones (02) Paso de argumentos a funciones

Vamos a aprender a pasar datos a una función, estos pueden ser de muchos tipos, ya sean variables, strings, arrays, números, booleanos... en el anterior articulo hemos visto como se pasaba una matriz completa, pero ahora vamos a ver un ejemplo mucho más sencillo, vamos a empezar enviando una cadena de texto como en el siguiente ejemplo:

<?php
 mostrar("Esto es una prueba");

 function mostrar($argumento)
 {
  echo $argumento;
 }
?>

En este ejemplo vemos como se llama a la función mostrar pasándole como argumento la cadena "Esto es una prueba" que recoge la función y muestra en el echo.
Del mismo modo podemos pasarle dos argumentos, siempre que la función pueda recibirlos:

<?php
 mostrar("Esto es una prueba", " con dos argumentos");

 function mostrar($argumento, $argumento2)
 {
  echo $argumento;
  echo $argumento2;
 }
?>

En este ejemplo hemos pasado dos argumentos separados por comas, ya que la función los recoge y luego los muestra en su código interno.
Algo que es muy sencillo ¿verdad?

De matrices a funciones

Ahora vamos a aprender a pasar una matriz a un función, si has entendido los ejemplos anteriores veras que no es nada difícil.
En el siguiente ejemplo vamos a calcular el precio medio de la gasolina durante un año, para ello vamos a generar un script donde hay un array con los precios, y una función que se dedique a calcularlo como vamos a ver a continuación:

<?php
  $gasolina = array(1.11, 1.17, 1.25, 1.33, 1.35, 1.38, 1.40, 1.42, 1.44, 1.45, 1.43, 1.44);

 precioMedio($gasolina);

 function precioMedio($matriz)
 {
  $total=0;
  $contador=0;
  $media=0;
  foreach ($matriz as $valor) {
   $total += $valor;
   $contador ++;
  }

  if(count($matriz)>0){
   $media = $total/$contador;
   echo 'El valor medio de la gasolina es de: ' . $media;
  } else {
   echo 'No hay datos para hacer el cáculo';
  }
 }
?>

Analicemos el ejemplo:

Lo primero que vemos es la declaración de un array $gasolina, como ya conocemos.
Seguidamente hacemos la llamada a la función, introduciendo el array como parámetro.
Declaramos la función que tiene un parámetro $matriz, que es como se llamará a los datos en todo el ámbito de la función.
Declaramos la variables que vamos a necesitar para hacer nuestra operación iniciándolas a cero. Esto se hace aquí y no fuera de la función ya que estas variables solo van a funcionar en este ámbito.
A continuación recorremos nuestro array ahora llamado $matriz, con un bucle foreach, en el cual vamos aumentando las variables $total y $contador.
Una vez que ha terminado de recorrer la matriz, vemos una estructura de control ifelse, la cual tiene como función controlar que el array no sea nulo, ya que pone como condición que $matriz tenga más de cero elementos. En ese caso hace la media y muestra en pantalla.
De no cumplir la condición del if, nos informa de que no hay datos.
Estas estructuras de control, se consideran una buena practica de programación ya que evitan que el programa pueda mostrar resultados extraños, o incluso se detenga por algún error y aunque no es el tema que nos trata veremos alguna de ellas en nuestros ejemplos que cada vez serán mas complejos.

Pasando valores por referencia

Cuando pasamos un valor a una función, lo que estamos pasando es una copia de ese objeto, no el objeto en si, por lo que el valor original del objeto no se modifica, como vemos en el siguiente ejemplo para calcular un cuadrado:

<?php
 $valor =3;
 cuadrado($valor);

 function cuadrado($numero)
 {
  $numero *= $numero;
  echo '<p>Numero: ' . $numero . '</p>';
 }
 
 echo '<p>Valor: ' . $valor . '</p>';
?>

Podríamos esperar que nos diera como resultado 9 y 9 ya que $numero se ha convertido en $valor, pero el resultado que nos da es:
Numero: 9
Valor: 3

Para que los cambios ejercidos en una función afecten al objeto que se le envía como parámetro, se debe de hacer por referencia, es decir introduciendo el propio objeto.
Para hacer esto, tan solo hay que poner & delante del argumento de la función, veamoslo:

<?php
 $valor =3;
 cuadrado($valor);

 function cuadrado(&$numero)
 {
  $numero *= $numero;
  echo '<p>Numero: ' . $numero . '</p>';
 }

 echo '<p>Valor: ' . $valor . '</p>';
?>

Como podemos ver lo único que cambia es en el argumento de la función, donde hemos añadido &, y ahora vemos que el resultado es:
Numero: 9
Valor: 9

PHP (03) Funciones (01) Creando funciones

Como hemos visto hasta ahora, PHP ofrece una enorme cantidad de funciones propias para realizar cálculos, trabajo con matrices y muchísimo más, de hecho es posible que muchas de las funcionalidades que requiramos estén implementadas, pero es hecho que cualquier desarrollador de cualquier lenguaje y esto incluye a PHP va a necesitar realizar sus propias funciones, ya que estas pueden ser llamadas una y otra vez ahorrando código, pueden recoger tratar y devolver datos, hacer el código mas legible, de hecho en PHP podremos crear páginas y sitios completos a través de funciones como veremos más adelante de forma sencilla y dinámica.

Pero ¿Como se crea una función en PHP?
Para crear funciones en PHP es bastante sencillo, tan solo hay que seguir el siguiente diagrama:

function nombreFuncion(argumentos)
{
 //código....
 return $valor_de_retorno
}

Hay que considerar que no todas las funciones tienen argumentos o valores de retorno, pero esto lo iremos aprendiendo en los siguientes artículos.
De esta forma vamos a ver un ejemplo que ya hemos hecho con las matrices y que obtiene el mismo resultado, aunque introduciendo una funcion y su llamada para que esta se ejecute:

<?php
 $escritoresSpain = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");
 $escritoresEngland = array (0=> 'Shakespeare', 1=>'Tolkien', 2=>'Lewis');
 $escritores = array_merge($escritoresSpain, $escritoresEngland);

 
 mostrar($escritores);

 function mostrar($argumento)
 {
  echo '<p><b>Escritores</b></p>';
  foreach ($argumento as $valor) {
   echo '<p>' . $valor . '</p>';
  }
 }
?>

En este ejemplo vemos que hay una función que recibe un argumento y que luego pasa el argumento por el bucle para mostrar el resultado.
La línea en la que aparece la expresión mostrar($escritores); es donde se hace la llamada a la función, en ella ocurren varias cosas importantes, ya que sin esta línea la función no se ejecuta y además se recoge el array $escritores y se le dice a la función que debe de trabajar con él.
No te preocupes si ahora mismo no entiendes bien el mecanismo esto es solo la introducción a las funciones e iremos profundizando en todos estos aspectos a lo largo del tema de funciones.

jueves, 11 de septiembre de 2014

PHP (02) Cadenas y matrices (14) Separar y combinar matrices

Puede resultar muy útil el separar y combinar matrices para tratar la información, para ello existen dos funciones que vamos a tratar a continuación.

Separando matrices

Para separar matrices se utiliza la función array_slice, la cual extrae parte de una matriz, creando otra como podemos ver en el siguiente ejemplo:

<?php
 $escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");
 $submatriz = array_slice($escritores, 1, 2);

 echo '<p><b>Slice submatriz</b></p>';
 foreach ($submatriz as $valor) {
  echo '<p>' . $valor . '</p>';
 }

 echo '<p><b>Slice escritores</b></p>';
 foreach ($escritores as $valor) {
  echo '<p>' . $valor . '</p>';
 }

?>

En el que podemos observar como actúa la función array_slice, introduciéndole como parámetros, el array del que vamos a extraer la nueva matriz y cuales son los elementos a separar.
Para que veas como funciona, pongo a continuación el resultado:
Slice submatriz
Cervantes
Machado
Slice escritores
Unamuno
Cervantes
Machado
Becquer

Union de matrices

Del mismo modo que se puede extraer una matriz de otra, se pueden unir en una nueva matriz utilizando array_merge, tal y como vemos en el siguiente ejemplo.

<?php
 $escritoresSpain = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");
 $escritoresEngland = array (0=> 'Shakespeare', 1=>'Tolkien', 2=>'Lewis');

 $escritores = array_merge($escritoresSpain, $escritoresEngland);

 echo '<p><b>Escritores</b></p>';
 foreach ($escritores as $valor) {
  echo '<p>' . $valor . '</p>';
 }
?>

Se puede observar que array_merge necesita como parámetros los arrays que se van a unir en el nuevo, y que al recorrer este con un bucle foreach obtenemos el siguiente resultado:
Escritores
Unamuno
Cervantes
Machado
Becquer
Shakespeare
Tolkien
Lewis

miércoles, 10 de septiembre de 2014

PHP (02) Cadenas y matrices (13) Desplazamiento por matrices

PHP nos permite utilizar varias funciones para movernos con un puntero de matriz por un array y de ese modo poder mostrar el elemento en el que se encuentra el puntero:
Estas funciones son:

current: para mostrar el lugar en el que se encuentra el puntero actualmente.
next: para mover el puntero a la siguiente posición
prev: para mover el puntero a la posición anterior
end: para mover el puntero a la última posición
reset: para mover el puntero a la primera posición

Podemos ver un ejemplo de como funcionan estas funciones en el siguiente script:

<html>
<head>
</head>
<body>

<?php
 $escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");
 echo '<p>Elemento actual: ' . current($escritores) . '</p>';
 echo '<p>Siguiente elemento: ' . next($escritores) . '</p>';
 echo '<p>Elemento previo: ' . prev($escritores) . '</p>';
 echo '<p>Último elemento: ' . end($escritores) . '</p>';
 echo '<p>Primer elemeto: ' . reset($escritores) . '</p>';
?>

</body>
</html>

Como puedes observar este ejemplo es muy sencillo, y el resultado, es muy fácil de intuir, de hecho es el siguiente:
Elemento actual: Unamuno
Siguiente elemento: Cervantes
Elemento previo: Unamuno
Último elemento: Becquer
Primer elemeto: Unamuno

JSON (04) Funciones

En el pasado articulo estuvimos viendo como leer una JSON desde Http, para mi gusto aunque algo más complejo es muy mecánico y lee un JSON directamente.
Ahora veremos, en este último articulo sobre el uso básico de JSON, como se puede hacer lo mismo desde funciones javascript, con un código muy simple...
Para ello vamos a introducir nuestro JSON como argumento de una función de javascript, y lo grabamos con el nombre array.js

miFuncion([
{
 "display": "Tutorial PHP",
 "url": "http://netrunning.blogspot.com.es/2014/08/php-00-fundamentos-basicos-01-que-es-php.html"
},
{
 "display": "Tutorial JSON",
 "url": "http://netrunning.blogspot.com.es/2014/09/json-00-introduccion.html"
},
{
 "display": "Tutorial AngularJS",
 "url": "http://netrunning.blogspot.com.es/2014/08/angularjs-00-introduccion.html"
}
]);

Una vez que tenemos nuestro archivo .js solo queda hacer la llamada en nuestro script y mostrarlo:

<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>
<script>
function miFuncion(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + 
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

<script src="array.js"></script>

</body>
</html>

En este caso es el propio archivo .js que contiene el JSON el que llama a la función mandando como argumento el JSON y ya el script es el que lo recorre y lo va mostrando.

Aunque más sencillo de esta forma requiere que el objeto este como argumento en una llamada a una función de javascript, lo cual no siempre será posible.

martes, 9 de septiembre de 2014

JSON (03) Http

Lo interesante de los objetos JSON es que estén en un archivo aparte, como vamos a ver en el ejemplo de este articulo, para que los diferentes scripts y páginas puedan leerlo sin necesidad de tener que cargarlo una y otra vez.

Para ello, lo primero que vamos a hacer es escribir un archivo llamado array.txt en nuestro servidor con el siguiente JSON:

[
{
 "display": "Tutorial PHP",
 "url": "http://netrunning.blogspot.com.es/2014/08/php-00-fundamentos-basicos-01-que-es-php.html"
},
{
 "display": "Tutorial JSON",
 "url": "http://netrunning.blogspot.com.es/2014/09/json-00-introduccion.html"
},
{
 "display": "Tutorial AngularJS",
 "url": "http://netrunning.blogspot.com.es/2014/08/angularjs-00-introduccion.html"
}
]

Vemos como no deja de ser un JSON sencillo, sin declarar ni nada, solamente el JSON.

A continuación veremos el archivo html tal y como quedaría, claro que el script también se puede sacar fuera a otro archivo como de costumbre, pero nosotros lo dejaremos embebido:

<!DOCTYPE html>
<html>
<body>

<div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "array.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    out += '<ul>';
    for(i = 0; i < arr.length; i++) {
        out += '<li><a href="' + arr[i].url + '">' + 
        arr[i].display + '</a></li>';
    }
    out += '</ul>';
    document.getElementById("id01").innerHTML = out;
}
</script>

</body>
</html>

Antes de que te eches las manos a la cabeza, veremos de que se trata todo esto...

Antes de nada vemos como se declara una variable llamada xmlhttp que es igual a un new XMLHttpRequest(), esto esta creando la interface de lectura del objeto, aunque si quieres más información puedes leerla aquí.
Tras esto declaramos otra variable llamada url con la url relativa de nuestro JSON.
Después preparamos toda la interface XMLHttpRequest() para leer el array, y mostrarlo a través de myFunction()

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

Pero ¿ que significa esto? pues lo primero que hace es activar la lectura del JSON siempre y cuando readyState (Si esta listo) sea igual a 4, que es el valor que tiene por defecto cuando esta cargado, y si status esta a 200 (cuando todo esta ok).
Tras esto declara un array haciéndole un parse al objeto JSON, como vimos en artículos anteriores
Y llama a la función que mostrará el array por pantalla con el formato que queramos.
xmlhttp.open("GET", url, true); y xmlhttp.send(); son los encargados de leer y de enviar los datos al script, sin estos dos métodos no se podría hacer nada, para entender como funcionan, te vuelvo a insistir en que observar como funciona toda la interface haciendo click aquí.

myFunction() recoge el valor de myArr que ya es la cadena del JSON y la trata por medio de un bucle for para recorrerla y mostrarla por pantalla como ya hemos visto otras veces.

Todo esto que parece muy difícil, es en realidad una sucesión de pasos muy mecánica y siempre se hace exactamente igual, teniendo la mayor diferencia en la función myFunction(), que es donde escogeremos la forma de mostrar los datos, en este caso, yo he escogido una lista que me da un resultado como este.

Si quieres hacer que este ejemplo funcione, copia el JSON con el nombre array.txt en una carpeta en tu servidor local y luego el html con el nombre index.html, abre el html y obtendrás el mismo resultado.

XMLHttpRequest()

XMLHttpRequest (XHR), también referida como XMLHTTP (Extensible Markup Language / Hypertext Transfer Protocol), es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web. Para los datos transferidos se usa cualquier codificación basada en texto, incluyendo: texto plano, XML, JSON, HTML y codificaciones particulares específicas. La interfaz se implementa como una clase de la que una aplicación cliente puede generar tantas instancias como necesite para manejar el diálogo con el servidor.

El uso más popular, si bien no el único, de esta interfaz es proporcionar contenido dinámico y actualizaciones asíncronas en páginas WEB mediante tecnologías construidas sobre ella como por ejemplo AJAX.

Esta interfaz funciona segun los siguientes atributos, métodos y eventos:

Atributos

Atributo	Descripción
`readyState`	Devuelve el estado del objeto como sigue: 0 = sin inicializar, 1 = abierto, 2 = cabeceras recibidas, 3 = cargando y 4 = completado.
`responseBody`	(Level 2) Devuelve la respuesta como un array de bytes
`responseText`	Devuelve la respuesta como una cadena
`responseXML`	Devuelve la respuesta como XML. Esta propiedad devuelve un objeto documento XML, que puede ser examinado usando las propiedades y métodos del árbol del Document Object Model.
`status`	Devuelve el estado como un número (p. ej. 404 para "Not Found" y 200 para "OK").
`statusText`	Devuelve el estado como una cadena (p. ej. "Not Found" o "OK").

Métodos

Método	Descripción
`abort()`	Cancela la petición en curso
`getAllResponseHeaders()`	Devuelve el conjunto de cabeceras HTTP como una cadena.
`getResponseHeader( nombreCabecera )`	Devuelve el valor de la cabecera HTTP especificada.
`open` `( método, URL [, asíncrono [, nombreUsuario [, clave]]] )`	Especifica el método, URL y otros atributos opcionales de una petición. El parámetro de método puede tomar los valores "GET", "POST", o "PUT" ("GET" y "POST" son dos formas para solicitar datos, con "GET" los parámetros de la petición se codifican en la URL y con "POST" en las cabeceras de HTTP). El parámetro URL puede ser una URL relativa o completa. El parámetro asíncrono especifica si la petición será gestionada asíncronamente o no. Un valor true indica que el proceso del script continúa después del método send(), sin esperar a la respuesta, y false indica que el script se detiene hasta que se complete la operación, tras lo cual se reanuda la ejecución. En el caso asíncrono se especifican manejadores de eventos, que se ejecutan ante cada cambio de estado y permiten tratar los resultados de la consulta una vez que se reciben, o bien gestionar eventuales errores.
`send([datos])`	Envía la petición
`setRequestHeader( etiqueta, valor )`	Añade un par etiqueta/valor a la cabecera HTTP a enviar.

Eventos

Propiedad	Descripción
`onreadystatechange`	Evento que se dispara con cada cambio de estado.
`onabort`	(Level 2) Evento que se dispara al abortar la operación.
`onload`	(Level 2) Evento que se dispara al completar la carga.
`onloadstart`	(Level 2) Evento que se dispara al iniciar la carga.
`onprogress`	(Level 2) Evento que se dispara periódicamente con información de estado.

La propuesta inicial de W3C no incluye propiedades y eventos presentes en implementaciones reales, como por ejemplo los eventos onload, onerror, onprogress, onabort y ontimeout. Algunos de ellos sí son recogidos por la nueva especificación Level 2, como puede verse en el cuadro anterior.

Fuente: Wikipedia

PHP (02) Cadenas y matrices (12) Recorriendo matrices bidimensionales

Recorrer un array bidimensional requiere un poco de esfuerzo extra, ya que mantiene algo más de complejidad, pero en realidad se trata tan solo de anidar dos bucles, tal y como veremos en los siguientes ejemplos.

En el primero vamos a utilizar un código extraido del libro de McGrawHill (PHP manual de referencia) en el cual veremos como se anidan los dos bucles for para recorrer un array bidimensional:

<html>
<head>
<title>
Recorrido por matrices multidimensionales
</title>
</head>
<body>
 <h1>Recorrido por matrices multidimensionales</h1>
<?php
 $calificaciones[0][] = 79;
 $calificaciones[0][] = 74;
 $calificaciones[1][] = 69;
 $calificaciones[1][] = 84;
 for ($exterior = 0; $exterior < count($calificaciones); $exterior++){
  for($interior = 0; $interior < count($calificaciones[$exterior]); $interior++){
   echo "\$calificaciones[$exterior][$interior] = ", $calificaciones[$exterior][$interior], "<br>";
  }
 }
?>
</body>
</html>

Analizando los dos bucles vemos como se anidan considerando que cada elemento del array exterior envuelve a un array interior que se cuenta en el segundo for, lo cual nos da como resultado:
$calificaciones[0][0] = 79
$calificaciones[0][1] = 74
$calificaciones[1][0] = 69
$calificaciones[1][1] = 84

Esto que puede resultar muy útil para algunos ejercicios en realidad es menos útil que si trabajamos con arrays asociativos, es decir, en este ejemplo no sabemos a quien se refieren las clasificaciones pero en el siguiente ejemplo vamos a ver como se introduce el array dentro de una tabla y como se presenta mucho mejor la información con un array asociativo.

<html>
<head>
</head>
<body>

<?php
 $notas ['Paco'] [0] = "5";
 $notas ['Paco'] [1] = "6.7";
 $notas ['Paco'] [2] = "3"; 
 $notas ['Paco'] [3] = "8";
 $notas ['María'] [0] = "3";
 $notas ['María'] [1] = "7";
 $notas ['María'] [2] = "6";
 $notas ['María'] [3] = "9";
 $notas ['Pepe'] [0] = "4";
 $notas ['Pepe'] [1] = "8";
 $notas ['Pepe'] [2] = "5"; 
 $notas ['Pepe'] [3] = "8";

 print_r($notas);

 echo '<p>Como se muestra con una tabla en un doble bucle foreach</p>';
 echo '<table style="padding: 15px; border:1px solid gray;">';
 echo '<tr><td>Nombre</td><td>Nota 1</td><td>Nota2</td><td>Nota3</td><td>Nota 4</td></tr>';

 foreach ($notas as $nombre => $valor) {
  echo '<tr style="padding: 15px; background-color: gray;">';
  echo '<td style="padding: 15px;">' . $nombre . '</td>';
  foreach ($valor as $key => $value) {
   echo '<td style="padding: 15px;"> ' . $value . '</td>';
  }
  echo '</tr>'; 
 }
 echo '</table>'; 
 
?>

</body>
</html>

Aquí vemos como se declara el array asociativo, como se declara una tabla con su cabecera, y finalmente introducimos los dos foreach anidados.
En el primer foreach se declara la fila y la primera columna de la misma añadiendo el nombre mientras que en el segundo se recorren las notas y se van añadiendo en las diferente columnas.
Finalmente antes de que termine el ciclo exterior se cierra la fila y se vuelve a empezar con el siguiente nombre... dando el siguiente resultado:

Como puedes observar el resultado final es mucho más legible y entendible que si solo usamos los bucles y sin que los arrays sean asociativos.

Esto que a la hora de verse por primera vez puede resultar un tanto complejo es en realidad muy sencillo y lo utilizaremos en muchas ocasiones, por lo que os animo a hacer vuestras propias practicas.

Nota: El estilo de la tabla debería de ir en un archivo externo CSS, pero para ilustrar el ejemplo y no complicar su comprensión introduciendo archivos separados he preferido dejarlo embebido dentro del código.

lunes, 8 de septiembre de 2014

JSON (02) Convirtiendo a objetos Javascript

El uso más común de JSON consiste en leer datos desde un servidor y presentarlos en una web, para lograr este objetivo tenemos dos funciones en javascript que vamos a ver a continuación; parse y eval y para realizar nuestro ejemplo utilizaremos el JSON del articulo anterior:

var notas = '{"clasificaciones" : [' + 
    '{ "nombre":"Paco Perez", "curso":"4º","nota":"6.25" },' +
    '{ "nombre":"Manuel Rodriguez", "curso":"3º", "nota":"5.00"},' +
    '{ "nombre":"María", "curso":"López", "nota":"7.15" } ]}';

Hay que fijarse de que ahora nuestro JSON esta dentro de una variable que lo construye como tal, aunque hay que tenerlo en cuenta en este ejemplo, pronto veremos que eso no será necesario, ya que los archivo JSON deben de ir fuera de nuestro script.

JSON.parse()

La funcion JSON.parse() convierte los archivos JSON en objetos javascript utilizando la siguiente forma:

var obj = JSON.parse(notas);

Y de este modo ya podemos utilizar este objeto en nuestra página.

<html>
<body>

<h2>Creando un objeto JavaScript con JSON</h2>

<p id="demo"></p>

<script>
var notas = '{"clasificaciones" : [' + 
    '{ "nombre":"Paco Perez", "curso":"4º","nota":"6.25" },' +
    '{ "nombre":"Manuel Rodriguez", "curso":"3º", "nota":"5.00"},' +
    '{ "nombre":"María", "curso":"López", "nota":"7.15" } ]}';

    var obj = JSON.parse(notas);

    document.getElementById("demo").innerHTML = obj.clasificaciones[2].nombre + " " + obj.clasificaciones[2].curso + " " + obj.clasificaciones[2].nota;
</script>

</body>
</html>

De este modo obtenemos de resultado:
María López 7.15

Si nos fijamos en como se accede a la infomación vemos que es por medio del objeto que hemos creado (obj), llamando a una propiedad que es como se declara el array dentro del JSON (clasificaciones) en el cual se le introduce el índice del elemento ([2]) y finalmente la siguiente propiedad que es la que recoge los valores.

eval

De forma muy similar funciona la función eval(), tan solo hay que cambiar la línea donde declaramos el objeto por:

var obj = eval ("(" + notas + ")");

Pero eval tiene algunos problemas, y es que compila y ejecuta todo javascript, por lo que puede dar problemas de seguridad y debe de ser evitada en la medida de lo posible, por lo que es mucho más seguro utilizar parse en lugar de eval, ya que la funcion parse solo reconoce el texto JSON y no compila los scripts, lo cual también hace que parse sea mucho más rápida que eval

domingo, 7 de septiembre de 2014

PHP (02) Cadenas y matrices (11) Matrices multidimensionales

¿Que significa eso de matrices multidimensionales? Pues bien, hasta ahora solo hemos trabajado con matrices unidimensionales, es decir una series de parejas nombre/valor, pero ahora vamos a complicarlo un poco, imaginemos que cada nombre (índice) esta compuesto también por otro array...
Podemos observar esto de forma sencilla en la siguiente imagen:

Vemos como un array unidimensional sería una pila de cajas, mientras que uno bidimensional (los más comunes) es una pared de ellas y los array multidimensionales pueden ser cubos de cajas. Nosotros nos basaremos en los bidimensionales de forma general.

Una vez entendido el concepto, nos aparece una nueva pregunta ¿Como declaro un array multidimensional? bueno la mejor forma de verlo es con un ejemplo:

<?php
 $notas ['Paco'] [1] = "5";
 $notas ['Paco'] [2] = "6.7";
 $notas ['Paco'] [3] = "3"; 
 $notas ['Paco'] [4] = "8";
 $notas ['María'] [1] = "3";
 $notas ['María'] [2] = "7";
 $notas ['María'] [3] = "6";
 $notas ['María'] [4] = "9";

 print_r($notas);

 echo '<p>La segunda nota de Paco es: ' . $notas ['Paco'] [2] . '</p>';
?>

Se puede observar que hemos creado un array $notas que tiene dos elementos con índice asociativo: ['Paco'] y ['María'], los cuales a su vez tienen diferentes subíndices (empezando desde el 1 por que los hemos puesto a mano). De esta forma tenemos nuestro array bidimensional que conceptualmente sería algo así:
[Paco] => Array ( [1] => 5 [2] => 6.7 [3] => 3 [4] => 8 )
[María] => Array ( [1] => 3 [2] => 7 [3] => 6 [4] => 9 )

Es decir dos filas donde la primera son las notas de Paco y la segunda la de María.

En la última linea del script estamos solicitando una nota del array en este caso la segunda nota de Paco, dando como resultado 6.7.

Como puedes ver es todo muy sencillo, pero ahora nos podría venir la siguiente pregunta... ¿como introduzco valores nuevos en estos array? bueno la respuesta es muy sencilla, tan solo hay que saber que queremos hacer, supongamos que queremos introducir una nota nueva a Paco y María, para ello solo hay que introducirlos de igual manera que en la declaración:

$notas ['Paco'] [5] = "7";
$notas ['María'] [5] = "6";

Incluso si quisiéramos meter un nuevo alumno, la forma sería igual de simple, solo habría que incluir las siguientes líneas:

$notas ['Pepe'] [1] = "4";
$notas ['Pepe'] [2] = "8";
$notas ['Pepe'] [3] = "5"; 
$notas ['Pepe'] [4] = "8";

De este modo nuestra matriz ahora mismo tendría tres filas, Paco, María y Pepe...

En el siguiente articulo recorreremos estos arrays bidimensionales con ciclos, algo que nos será muy útil en el futuro.

PHP (02) Cadenas y matrices (10) Operadores de matrices

PHP permite también el uso de operadores entre matrices según la siguiente lista:

$a + $b produce la unión de $a y $b.
$a == $b produce TRUE si $a y $b tienen los mismos elementos.
$a === $b produce TRUE si $a y $b tienen los mismos elementos en el mismo orden.
$a != $b produce TRUE si $a no es igual a $b.
$a <> $b produce TRUE si $a no es igual a $b.
$a !== $b produce TRUE si $a no es idéntico a $b.

Podemos ver en el siguiente ejemplo como funciona en un ifelse, uno de estos operadores:

<?php
 $tortillaPatatas[0] = "huevo";
 $tortillaPatatas[1] = "patatas";
 $tortillaPatatas[2] = "aceite";
 print_r($tortillaPatatas);
 echo '<p></p>';
 $tortillaQueso[0]= "huevo";
 $tortillaQueso[1]= "queso";
 $tortillaQueso[2]= "aceite";
 print_r($tortillaQueso);

 if ($tortillaPatatas == $tortillaQueso){
  echo '<p> \$tortillaPatatas tiene los mismos elementos que \$tortillaQueso';
 }else {
  echo '<p> $tortillaPatatas <b>NO</b> tiene los mismos elementos que $tortillaQueso</p>';
 }
?>

Comparar matrices

Veamos el siguiente ejemplo basado en el anterior:

<?php
 $tortillaPatatas[0] = "huevo";
 $tortillaPatatas[1] = "patatas";
 $tortillaPatatas[2] = "aceite";
 print_r($tortillaPatatas);
 echo '<p></p>';
 $tortillaQueso[0]= "huevo";
 $tortillaQueso[1]= "queso";
 $tortillaQueso[2]= "aceite";
 print_r($tortillaQueso);

 $diferencia = array_diff($tortillaPatatas, $tortillaQueso);

 echo '<h2>Diferencia</h2>';
 foreach ($diferencia as $key => $valor) {
  echo "<p>Clave: $key; valor: $valor ";
 }

 $similitudes = array_intersect($tortillaQueso, $tortillaPatatas);
 echo '<h2>Similitudes</h2>';
 foreach ($similitudes as $key => $valor) {
  echo "<p>Clave: $key; valor: $valor ";
 }

?>

Que nos da como resultado:
Array ( [0] => huevo [1] => patatas [2] => aceite )
Array ( [0] => huevo [1] => queso [2] => aceite )

Diferencia

Clave: 1; valor: patatas

Similitudes

Clave: 0; valor: huevo
Clave: 2; valor: aceite

Se puede observar como funcionan las dos funciones, array_diff y array_intersect, las cuales nos dicen cuales son los elementos que difieren y que coinciden entre las dos variables, tal y como se ven en el ejemplo, pero estas dos funciones solo funcionan con índices numéricos, afortunadamente si tenemos índices asociativos (es decir aquellos a los cuales les hemos puesto una cadena), podemos utilizar las funciones: array_diff_assoc o array_intersect_assoc respectivamente.

JSON (01) Sintaxis

Vamos a comenzar a ver como se declara un objeto JSON...
JSON se declara con notación javascript, por lo que no es muy difícil de entender para aquellos que tienen unos conocimientos mínimos de desarrollo web, pero cumple con una serie de especificaciones:

Los datos aparecen en pares de nombre/valor
Los datos están separados por comas ,
Cada para viene entre llaves {}
Los arrays aparecen entre corchetes []

Valores

JSON puede incluir varios tipos de valores como:

Un número, ya sea un entero o decimal
Una cadena o string entre comillas
Un booleano (true o false)
Un nuevo objeto en su interior, entre llaves
Un array en su interior, entre corchetes
valor nulo (null)

Un ejemplo completo de JSON

En el siguiente ejemplo vamos a observar como se declara JSON, como se recoge y como se muestra por pantalla, es un ejemplo muy sencillo que puede servirte de ayuda, y si estas siguiendo el tutorial de AngularJS, podrás ver como se pueden hacer multitud de cosas con estas dos tecnologías unidas.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var notas = [
    {
    "nombre":"Paco Perez",
    "curso":"4º",
    "nota":"6.25"
    }, 
    {
    "nombre":"Manuel Rodriguez",
    "curso":"3º",
    "nota":"5.00"
    },
    {
    "nombre":"María",
    "curso":"López",
    "nota":"7.15"
    },
];

document.getElementById("demo").innerHTML =
notas[0].nombre + " " + notas[0].curso + " " + notas[0].nota;
</script>

</body>
</html>

En este ejemplo vemos como en el script se declara el JSON como un array de javascript que tiene varios objetos (tres en nuestro caso), y que cada uno tiene tres pares nombre/valor, en nuestro caso, nombre curso y nota.
A continuación se introduce en el html la "consulta" al JSON, donde se le indica a javascript que del array notas tome la posición cero y sus propiedades.

Esto nos da como resultado:
Paco Perez 4º 6.25

sábado, 6 de septiembre de 2014

PHP (02) Cadenas y matrices (09) Ordenar matrices

Puede ser muy útil el poder ordenar la matrices (ordenar datos de las consultas a una base datos, de un objeto JSON...), para ello hay una serie de funciones muy útiles que nos puede ayudar como sort, asort, ksort... (funciones expuestas en el articulo de funciones de matrices), pero que ahora veremos con un poco de más profundidad, tomando alguna de ellas como ejemplo:

sort / rsort

Nos va a ordenar el array de forma alfabética, es decir va a tomar los valores del array y los ordena, como vemos en el siguiente ejemplo:

<?php
$escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");
echo '<p>';
print_r($escritores);
echo '</p>';
sort($escritores);
echo '<p>';
print_r($escritores);
echo '</p>';
?>

Que nos da como resultado:
Array ( [0] => Unamuno [1] => Cervantes [2] => Machado [3] => Becquer )
Array ( [0] => Becquer [1] => Cervantes [2] => Machado [3] => Unamuno )

Como podemos ver una vez que se le aplica la función sort reordena el array de forma alfabética.
Si quisiéramos que nos lo ordenase de forma invertida tan solo deberíamos cambiar la función sort por la función rsort.

asort / arsort

Utilizar sort no funciona muy bien cuando se utilizan índices de texto, para ello podemos utilizar las funciones asort y arsort para lograr ejemplos como el siguiente:

<?php
$notas = array ("Jose"=>7.4, "Maria"=>4.2, "Lourdes"=>8.0, "Antonio"=>5.6);
echo '<h2>asort</h2><p>';
print_r($notas);
echo '</p>';
asort($notas);
echo '<p>';
print_r($notas);
echo '</p>';
?>

Que nos da como resultado:
Array ( [Jose] => 7.4 [Maria] => 4.2 [Lourdes] => 8 [Antonio] => 5.6 )
Array ( [Maria] => 4.2 [Antonio] => 5.6 [Jose] => 7.4 [Lourdes] => 8 )

Ordenando los valores por orden alfabético, en este caso numeral creciente.
Si queremos que el array se clasifique de forma inversa entonces usaremos arsort.

ksort / krsort

Pero si queremos ordenar el array por sus índices y no por su valores podemos utilizarlas funciones como en el siguiente ejemplo:

<?php
$notas = array ("Jose"=>7.4, "Maria"=>4.2, "Lourdes"=>8.0, "Antonio"=>5.6);
echo '<h2>asort</h2><p>';
print_r($notas);
echo '</p>';
ksort($notas);
echo '<p>';
print_r($notas);
echo '</p>';
?>

Que nos da como resultado:
Array ( [Jose] => 7.4 [Maria] => 4.2 [Lourdes] => 8 [Antonio] => 5.6 )
Array ( [Antonio] => 5.6 [Jose] => 7.4 [Lourdes] => 8 [Maria] => 4.2 )

Si nos fijamos podemos ver como ahora ha ordenado los valores del array por índices de forma alfabética, y para hacerlo al contrario, tan solo hace falta cambiar la funcin ksort por krsort.

JSON (00) Introducción

A lo largo de una serie de artículos, iré explicando que JSON y como funciona, ya que se utiliza en muchos lenguajes y es una forma muy sencilla de intercambiar datos, incluso entre diferentes lenguajes de programación, tanto de servidor como de cliente.

JSON es una sintaxis sencilla para almacenar e intercambiar datos, mucho mas sencilla y menos pesada que XML. Su nombre significa: JavaScript Object Notation y es autodescriptivo y facil de interpretar.

Para ilustrar esta cualidades veremos un pequeño JSON antes de entrar en materia en los próximos días.

{socios":[
    {"Nombre":"Paco", "Apellidos":"Perez"},
    {"Nombre":"Ana", "Apellidos":"Garcia"},
    {"Nombre":"Antonio", "Apellidos":"Moreno"}
]}

jueves, 4 de septiembre de 2014

PHP (02) Cadenas y matrices (08) extración de datos de matrices

Se pueden extraer datos de las matrices y guardarlos en variables, para ello se utiliza la función extract, que guarda cada elemento de la matriz en un variable con el nombre del índice. Veámoslo en un ejemplo.

<?php
 $notas = array ("Jose"=>7.4, "Maria"=>4.2, "Lourdes"=>8.0, "Antonio"=>5.6);
 extract($notas);
 echo "<p>Jose " . $Jose . "</p>" ;
 echo "<p>Maria " . $Maria . "</p>" ;
 echo "<p>Lourdes " . $Lourdes . "</p>" ;
 echo "<p>Antonio " . $Antonio . "</p>" ;
?>

Lo que nos da como resultado:
Jose 7.4
Maria 4.2
Lourdes 8
Antonio 5.6

Se puede observar que extract recoge el array $notas y extrae cada elemento como el valor de una variable que es el índice del array.

Se puede extraer también los datos de una matriz mediante la función list, en este caso a cada elemento del array se le debe de introducir en una variable, tal y como vemos en el siguiente ejemplo:

<?php
 $escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");
 list($noventayocho, $sigloOro, $vientisiete, $romanticismo) = $escritores;
 echo '<p>$noventayocho ' . $noventayocho . '</p>';
 echo '<p>$sigloOro ' . $sigloOro . '</p>';
 echo '<p>$vientisiete '. $vientisiete . '</p>';
 echo '<p>$romanticismo ' . $romanticismo . '</p>';
?>

Lo que nos da como resultado:
$noventayocho Unamuno
$sigloOro Cervantes
$vientisiete Machado
$romanticismoBecquer

Como se ve, con list se debe de poner a cada elemento del array en una variable y luego indicar cual es el array que sufrirá la operación.

PHP (02) Cadenas y matrices (07) Conversión entre cadenas y matrices

Suele ser muy común el querer convertir matrices en cadenas y viceversa; para ello PHP utiliza dos funciones llamadas implode y explode.
El uso de estas funciones es a la par sencillo y util, en primer lugar veremos como funciona implode:

<?php
 $escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");

 $texto = implode(", ", $escritores);
 echo $texto;
?>

Que da como resultado:
Unamuno, Cervantes, Machado, Becquer

De hecho si lo analizamos podemos ver que una vez que esta declarado el array, se declara una variable ($texto) que introduce la función implode, que tiene dos "parámetros", el primero nos dice como separar los elementos de la matriz, y el segundo nos dice que matriz se debe de tomar.

Ahora vamos a utilizar explode para separar una cadena en una matriz:

<?php
 $lista = "Camarones, flamenquines, churrasco, papas bravas";
 $carta = explode(", ", $lista);
 print_r($carta);
?>

Que nos da como resultado:
Array ( [0] => Camarones [1] => flamenquines [2] => churrasco [3] => papas bravas )

Vemos como se declara la cadenas y luego el array por medio de explode, declarado el separador y a que cadena se le hace la conversión, para finalmente mostrarlo por medio de otra forma de extraer la información y mostrarla por pantalla como es print_r.

AngularJS (11) Validaciones

Una vez que hemos visto los formularios hay que validarlos, ya que ahora mismo podíamos poner en nuestros campo de texto lo que quisiéramos.
Por suerte mucho del trabajo, lo que incluye algunas expresiones regulares, esta ya incluido en el propio html5, donde poniendo el tipo de input se determina que es lo que tiene que introducirse.
Además angular puede ayudar en este proceso, pero de todas formas hay que tener en cuenta que las validaciones en cliente no son lo suficientemente seguras y se deberá de hacerlas en el lado del servidor.

Veamos el ejemplo:

<!DOCTYPE html>
<html> 
<body>
<h2>Ejemplo de validación</h2>

<div ng-app="" ng-controller="validateCtrl" >
<form name="myForm" novalidate>


<p>Nombre de usuario:</p>
<p><input type="text" name="usuario" ng-model="usuario" required>
<span style="color:red" ng-show="myForm.usuario.$dirty && myForm.usuario.$invalid">
<span ng-show="myForm.usuario.$error.required">El nombre de usuario es requerido.</span>
</span>
</p>

<p>Email:</p>
<p><input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email requerido.</span>
<span ng-show="myForm.email.$error.email">La direccion de correo es incorrecta.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.usuario.$dirty && myForm.usuario.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid" ng-click="toggle()">
</p>

</form>

<p ng-hide="mostrar">Nombre: {{usuario}}, email: {{email}}


</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {
    $scope.usuario = 'Paco Perez';
    $scope.email = 'Paco.perez@gmail.com';
    $scope.mostrar = true;
    $scope.toggle = function() {
        $scope.mostrar = !$scope.mostrar;
    };
}
</script>

</body>
</html>

Cuando se ejecuta aparecen dos campos de texto los cuales tienen su propio tipo, a continuación aparece un span de color rojo que aparece solo si el texto cumple con las condiciones $dirty o $invalid, escogiendo dependiendo la condición que se cumpla.

El submit esta desactivado mientras que no este todo correcto, es decir mientras en el formulario no se cumplan las condiciones de todos los inputs, y una vez que este se activa al hacer click en el aparece el ultimo párrafo mostrando los datos.

En este ejemplo podemos ver como se realizan las validaciones básicas, mezclándolo con la directiva ng-disabled y trabajando además con los eventos, ya que cuando se hace click en un evento, aparece el texto con la directiva ng-hiden.

miércoles, 3 de septiembre de 2014

PHP (02) Cadenas y matrices (06) funciones de matrices

PHP tiene muchas funciones para trabajar con matrices, como no podría ser de otro modo, a coninuación muestro algunas de las más importantes, de muchas de las cuales iremos viendo en proximos articulos su funcionamiento.
Si quieres más ayuda en el uso de estas funciones, no dudes en visitar php.net.

Listado de funciones de matriz en PHP

AngularJS (10) Formularios

Ya hemos visto algunos formularios en los ejemplos que hemos realizado hasta ahora, de modo que no nos extenderemos mucho en ello, aunque hoy vamos a realizar uno explicando como funciona, veras como es muy muy sencillo.

<body>
<div ng-app="" ng-controller="formController">
  <form novalidate>
    <p>Nombre:
    <input type="text" ng-model="usuario.nombre"></p>
    <p>Apellido:
    <input type="text" ng-model="usuario.apellido">
    </p>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{usuario }}</p>
  <p>master = {{master}}</p>
</div>

<script>
function formController ($scope) {
    $scope.master = {nombre:"Paco", apellido:"Perez"};
    $scope.reset = function() {
        $scope.usuario = angular.copy($scope.master);
    };
    $scope.reset();
}
</script>

</body>
</html>

Como siempre inicializamos la aplicación con ng-app y creamos el controlador con ng-controller.
Los datos de los inputs se recogen con la directiva ng-model que los introduce en la propiedad del objeto.
El formato del formulario es copiado del master donde van apareciendo las entradas del formulario.
Al hacer click en RESET este copia el valor predeterminado en la propiedad master en form introduciendo los valores por defecto.

martes, 2 de septiembre de 2014

PHP (02) Cadenas y matrices (05) Manejo de matrices con ciclos

El manejo de las matrices y lo ciclos o bucles, son algo realmente natural, ya que los van recorriendo elemento a elemento, haciendo que funcionen de manera rápida y sencilla, para ello veremos a continuación como se hace un recorrido por una matriz de las diferentes formas...

Si tienes alguna duda sobre como se utilizan los bucles te aconsejo que revises las entradas que hablan de ellos en este mismo blog.

Ciclo for

Una función muy util que se puede utilizar en los bucles for es la función count(), esta función devuelve el numero de elementos que tiene una matriz y este numero se puede utilizar para tomarlo como valor limite del contador del for tal y como vemos en el ejemplo:

<html>
<head>
</head>
<body>

<?php
 $escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");

 for ($i=0; $i< count($escritores); $i++){
  echo "<p>escritor " . $i . " = " . $escritores[$i] . "</p>";
 }
?>
</body>
</html>

Como puedes observar, hemos declarado un array y luego lo hemos recorrido con un for, donde hemos puesto la condición de $i sea menor al numero de elementos del array

Básicamente eso es todo de momento con el ciclo for... es muy muy sencillo, y en verdad es el que a mi más me gusta...

Ciclo foreach

Este ciclo es otro de los más importantes, aunque es muy parecido al ciclo for, se caracteriza por que no trabaja con contadores, sino con colecciones, por lo que no pone condiciones de comienzo ni final.

De hecho se puede utilizar para arrays unidimensionales o bidimensionales de forma muy sencilla.

Índices númericos

<html>
<head>
</head>
<body>

<?php
 $escritores = array (0=> "Unamuno", 1=> "Cervantes", 2=> "Machado", 3=> "Becquer");

 foreach ($escritores as $valor) {
  echo "<p>Escritor: " . $valor . "</p>";
 }
?>
</body>
</html>

Puedes observar que convierte el elemento que va tocando en la variables $valor que es con la cual podemos trabajar y mostrar en pantalla.

Índices asociativos

Cuando un array es bidimensional es muy fácil de recorrer con el foreach sin necesidad de recurrir a dobles for, solamente hay que hacer lo siguiente:

<html>
<head>
</head>
<body>

<?php
 $notas = array ("Jose"=>7.4, "Maria"=>4.2, "Lourdes"=>8.0, "Antonio"=>5.6);

 foreach ($notas as $nombre => $valor) {
  echo "<p>" . $nombre . " = " . $valor . "</p>";
 }
?>
</body>
</html>

Se puede observar que tras declarar el array bidimensional $notas, en el foreach se recoje el primer valor del elemento o índice como la variable nombre y que a este se le asigna una variable $valor, que es el valor que tiene el array en el índice que va recorriendo.
Tras esto solo hace falta trabajar con nuestras dos variables $nombre y $valor.

Ciclo while

Incluso se puede utilizar un ciclo while para recorrer un array, aunque esta forma es menos usada, puede tener su utilidad para ello se hace de la siguiente forma:

<html>
<head>
</head>
<body>

<?php
 $notas = array ("Jose"=>7.4, "Maria"=>4.2, "Lourdes"=>8.0, "Antonio"=>5.6);

 while (list($nombre, $valor) = each($notas)) {
  echo "<p>" . $nombre . " = " . $valor . "</p>";
 }
?>
</body>
</html>

Si observamos el while, vemos que la condición es que tome las variables $nombre y $valor de cada ciclo que hace por el array $notas y después de tomarlas podemos trabajar con ellas durante todo el ciclo.

AngularJS (09) Modulos

Todos los controladores deberían de estar bajo un modulo, esto significa que los módulos definen las aplicaciones, haciéndolas más entendibles y manteniendo el nombre de espacios limpio.
De hecho para ello se utiliza la directiva ng-app, a la cual nunca hemos definido pero que a partir de ahora sí haremos, ya que de ella depende el modulo como iremos viendo en este articulo.
Con los módulos es donde definimos unas de las características más famosas de Angular, el acabar con el código spaghetty y de ese modo tener un código más claro y limpio. Aunque como podrás haber descubierto ya, Angular es mucho más que eso.

Los controladores por si solos contaminan el espacio de nombres

Hasta el momento todos las aplicaciones que hemos ido haciendo han utilizado valores locales, tanto variables como funciones.
Este tipo de valores deben de ser usados lo mínimo posible, ya que pueden ser destruidos o sustituidos por otros scripts, los módulos resuelven, o al menos reducen en gran parte este problema.

La directiva ng-app es definida con un nombre que es el nombre del modulo, que es el nombre que recibe la aplicación, convirtiendo al controlador en una propiedad del modulo.

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ nombre + " " + apellidos }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.nombre = "Paco";
    $scope.apellidos = "Perez";
});
</script>

</body>
</html>

La primera diferencia que observamos es que hemos introducido el script de AngularJS en el head y no en la parte inferior del body, esto se debe a que para que las llamadas a los módulos solo pueden ser compiladas una vez se ha cargado la librería.
Podemos observar como por primera vez hemos dado nombre a la directiva ng-app, con el nombre de myApp
Una vez dentro del script hemos introducido una línea declarando la variable app como un modulo de la siguiente forma:

var app = angular.module("myApp", []);

Tras esto hemos creado la propiedad controlador del modulo y hemos creado todo de forma normal.

Archivos en AngularJS

Pero como ya dijimos en su momento, lo correcto es tener los scripts de Angular fuera del código html, aunque ahora lo vamos a definir un poco más, ya que es necesario crear un archivo independiente para la declaración de los módulos y otro para los controladores, de la siguiente forma:

Primero creamos el archivo donde estará el modulo, en nuestro caso myApp.js, y en el se introduce la declaración del modulo, en nuestro caso una vez más sería el que se muestra a continuación:

var app = angular.module("myApp", []);

A continuación en otro archivo se introducen los controladores, en nuestro caso sería myCtrl.js y se introduciría el siguiente código del controlador:

app.controller("myCtrl", function($scope) {
    $scope.firstName 
 = "John";
    $scope.lastName 
 = "Doe";
});

Naturalmente debemos de introducir la carga del archivo del modulo antes que el del controlador para que no nos de error, dejando nuestro html de la siguiente forma:

<!DOCTYPE html>
<html>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ nombre + " " + apellido }}
</div>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

Nota: La aplicación debe de tener al menos un archivo de módulos y un archivo de controlador para cada controlador. De este modo es como se acaba con el código spaghetty.

lunes, 1 de septiembre de 2014

PHP (02) Cadenas y matrices (04) Modificación de datos en matrices

Es muy común que se quieran modificar los datos de una matriz, cosa sencillísima ya que tan solo hace falta volver a declarar el elemento de la matriz. Por ejemplo, y siguiendo con el ejemplo de los escritores del anterior articulo de PHP, imaginemos que tenemos este array:

$escritores [0] = "Unamuno";
$escritores [1] = "Cervantes";
$escritores [2] = "Machado";
$escritores [3] = "Becquer";

Y queremos modificar a Cervantes por Pio Baroja, sería tan sencillo como hacer esto:

$escritores [1] = "Pio Baroja";

De esta forma el segundo elemento del array (recordemos que los arrays cuentan desde 0 y no desde 1), sería Pio Baroja.
Si queremos añadir un nuevo elemento al array, es tan sencillo como cuando lo creamos, añadiremos a este array a Gerardo Diego:

$escritores [] = "Gerardo Diego";

Eliminar elementos de un array

En ocasiones querrás eliminar elementos de un array/matriz, y mucha gente cree que modificando la posición por una cadena vacía es suficiente, vamos, haciendo esto que esta mal!!!!

$escritores [2] = "";

Ya que esto dejará en blanco el contenido del espacio, pero no eliminará el espacio en sí y cunado veamos como se recorre un array utilizando un bucle, veremos que dejaría un espacio en blanco entre la información.

Pero entonces ¿cómo elimino una posición de un array?
Para ello vamos a utilizar un función de matriz denominada unset(), cuyo manejo es muy sencillo de la siguiente forma:

unset (escritores [2]);

De este modo eliminamos el elemento completo.
En el próximo articulo recorreremos los arrays por medio de bucles, para empezar a ver la potencia que tiene esta forma de tratar los datos.

AngularJS (08) Eventos

Vamos a empezar a trabajar con los eventos, y con más directivas (no os preocupeis la última entrada de esta serie de tutoriales será una recopilación de todas las directivas y su función).

ng-click

En este caso vamos a trabajar con la directiva ng-click, que sirve para cuando hacemos click en un elemento del DOM.
Y que mejor forma de ver como funciona que con un ejemplo:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-controller="myController">

<button ng-click="contador = contador + 1">Suma 1 al contador</button>
<button ng-click="contador = contador - 1">Resta 1 al contador</button>

<p>{{ contador }}</p>

</div>
<script>
function myController($scope) {
    $scope.contador = 0;
}
</script> 

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>


</body>
</html>

Como puedes observar tenemos las ya rutinarias ng-app (que inicializa la aplicación) y ng-controller (que llama a nuestro controlador de la misma).
A continuación en ng-click se actualiza la propiedad contador del $scope añadiéndole o restándole 1, según el botón que pulsemos. Hay que tener en cuenta que en el controlador el contador empieza con un valor de cero.
Finalmente en un párrafo se introduce la expresión que muestra el valor actual del contador.