sábado, 3 de agosto de 2013

Ejemplo de formulario funcional

He creado una web que contiene un pequeño formulario para que podáis probar el ejemplo propuesto. Podéis acceder en http://skytablogs.comlu.com. La página consta de un formulario con los campos destino, nombre, edad y experiencia. En el campo destino poned vuestro mail (o el mail al que queráis enviar la información) y los datos.  Así podréis ver de manera práctica los resultados. Os dejo el código de la página del formulario y de la página en PHP.

index.html

<form action="http://skytablogs.comlu.com/send.php" method="post">

Destino: <input type = "text" name = "destino"><br>

Nombre: <input type="text" name="nombre"><br>

Edad: <input type="text" name="edad" size = "4"><br>

<textarea name ="exp">Experiencia</textarea><br>

<input type="submit" value="enviar datos">

</form>

send.php

<?php

 $a = $_REQUEST['destino'];

 $asunto = $_REQUEST['nombre'];

 $cuerpo = "Edad " . $_REQUEST['edad'] . " Experiencia: " . $_REQUEST['exp'];

 mail($a, $asunto, $cuerpo)

 ?>

viernes, 2 de agosto de 2013

Formulario de contacto PHP

Ya hemos visto como hacer formularios en HTML, sin embargo, si queremos que estos sirvan para contactar con nosotros (enviandonos un mail de forma automatica) deberemos crear una segunda pagina que contenga el código en PHP para hacer ésto. Primero veamos de nuevo el código de nuestro formulario en HTML.

<form action="pagina2.php" method="post">

Nombre: <input name="nombre" type="text" /><br />

Edad: &nbsp; &nbsp; &nbsp;<input name="edad" size="4" type="text" /><br />

<textarea name="exp" style="height: 47px; margin: 2px; width: 209px;">Experiencia</textarea><br />
<input type="submit" value="enviar datos" />
</form>

Ahora expliquemos el código línea por línea:

  1. action = " pagina2.php " nos indica en que página estará el código que nos enviara el mail. method = " post " nos indica como se envian los datos, podemos poner get  o post pero para un formulario siempre suele usarse el método post.
  2. name = " nombre " nos servirá para poder acceder a la información utilizando el comando $_REQUEST['nombre']. Nos servira igual para name = " edad "  y  name = " exp ".
  3. input type = " submit "  para indicar al boton que debe enviar los datos i value lo que queremos que el botón muestre.
Una vez tengamos el formulario listo debemos crear una nueva página en la que incluir el siguiente código:

<?php

 $a = "nuestromail@ejemplo.com";

 $asunto = $_REQUEST['nombre'];

 $cuerpo = "Edad " . $_REQUEST['edad'] . " Experiencia: " . $_REQUEST['exp'];

 mail($a, $asunto, $cuerpo)

 ?>

Y ahora volvamos a ver línea por línea lo que este código hace:

  1. <?php ya sabemos que sirve para indicar que lo que viene a continuación sera código en PHP.
  2. $a = "nuestromail@ejemplo.com" simplemente asigna a la variable $a  un mail que nosotros queramos (que será al que enviaremos la información).
  3. $asunto = $_REQUEST['nombre']; nos indica que ahora la variable $asunto  contiene la información del campo nombre de nuestro formulario. La instruccion $_REQUEST  sirve para pedir ésta información al formulario.
  4. $cuerpo = "Edad " . $_REQUEST['edad'] . " Experiencia: " . $_REQUEST['exp']; Aquí lo que hacemos es concatenar las cadenas de texto para que queden unidas unas a otras, de forma que si por ejemplo el campo edad  contiene "26" y el campo exp  contiene "dos años de experiencia trabajando como veterinario" el resultado de $cuerpo sería "Edad 26 Experiencia: dos años de trabajo como veterinario".
  5. En esta linea utilizamos el comando mail  que tiene la siguiente estructura:
  6. mail ( destinatario , asunto, cuerpo del mensaje);

    destinatario: Aqui pondremos el mail de destino.

    asunto: Éste sera el asunto que se muestre en el mail.

    cuerpo del mensaje: Aqui vendra el texto mostrado dentro del mail.
  7. ?>  indica el cierre del codigo PHP.
Una vez hemos creado ambas páginas podemos ver de forma practica que es lo que pasa con un ejemplo práctico en:



Y una vez le demos a enviar nos llegará un mail con la siguiente información:


jueves, 1 de agosto de 2013

Conceptos básicos sobre PHP

Ahora que ya sabemos un poco de HTML y Javascript es hora de introducir unos conceptos básicos sobre PHP. Primero de todo veremos (tal y como hicimos con javascript) un "hola mundo", pero esta vez en PHP. Para introducir un código en PHP dentro de nuestra web lo haremos entre los signos <?php para la apertura del código y ?> para indicar que es el fin, como si de una etiqueda de HTML se tratase. Aquí tenemos un ejemplo más claro de cómo se hace esto:

<html>

<head></head>

<body>

<?php
echo "Hola mundo";
?>

</body>

</html>

Realmente no es un código que nos vaya a ser útil todavía, pero podemos ver como, dentro de la estructura de HTML instertamos el código en PHP. El resultado de ejecutar el código anterior simplemente seria una pagina web en la que pondría:

Hola mundo

El  comando echo simplemente imprime por pantalla lo que haya a continuacion, que no se diferenciaría en nada de hacer lo siguiente:

<html>

<head></head>

<body>

Hola mundo

</body>

</html>

Una vez visto ésto ahora diré que las estructuras más básicas no varían demasiado de un lenguaje a otro, nos encontraremos con estructuras de tipo while, condicionales, etc... Iguales a las vistas en javascript, pero antes destacaré una serie de diferencias y similitudes entre los dos lenguajes:

  1. En Javascript las variables se declaraban usando var variable, en PHP en cambio no hace falta declararlas, simplemente al poner el signo $ delante se declaran solas de manera que estas dos sentencias serian equivalentes de un lenguaje a otro:
  2. Var numero = 1;
    $numero = 1;
  3. Las estructuras de los bucles while o los condicionales if son iguales para ambos lenguajes:
  4. if(condicion) {
    sentencia
    }
    while (condicion) {
    sentencia
    }
  5. Finalmente hay que destacar que cada lenguaje consta de sus propios comandos que deberemos aprender de forma individual (podeis aprender mas sobre PHP y Javascript mirando en páginas recomendadas). Así que lo que en PHP es el comando echo en Javascript el equivalente es el document.write.
Ahora sabiendo todo esto podemos pasar a profundizar un poco mas en PHP.

miércoles, 31 de julio de 2013

Primeros pasos para crear una pequeña web

Ahora que tenemos unos conocimientos basicos tanto de html como de javascript, podemos hacer una pequeña web con un proposito concreto. Haremos un ejemplo ficticio en el que hacemos una página para una protectora de animales, de forma que la gente podrá enviar solicitudes fácilmente para ayudar como voluntarios. Para diseñarla primero debemos seguir unos pasos:
  • Definir el propósito de nuestra web: Esta pequeña web estará orientada a que la gente pueda contactar con nosotros fácilmente a la vez que demos la información necesaria de una forma clara.

  • Definir cual sera el contenido: Contendrá una parte de información y un formulario de contacto. La información que proporcionaremos a los voluntarios potenciales será el lugar en el que pueden ayudar y los horarios de asistencia así como información sobre los trabajos que desarrollaran a lo largo de esas horas. En el formulario pediremos el nombre del voluntario, su edad y la experiencia.

  • Decidir cómo la presentaremos: Ésta parte es muy importante ya que una web ha de ser agradable visualmente a la vez que rápida. Por ahora nosotros incluiremos simplemente una imagen relacionada con la información que proporcionamos y el formulario al final de página.

  • Finalmente, crear la pagina: Ahora ya solo debemos escribir el texto y crear el formulario de contacto. Ahora nos centraremos en el formulario ya que el contenido puede ser el que queramos.
<form action="pagina2.php" method="post">
Nombre:
<input type="text" name="nombre">
Edad:
<input type="text" name="edad" size = "4">
<textarea name ="exp">Experiencia</textarea>
<input type="submit" value="enviar datos">
</form>

  • Y el resultado del código anterior:

Nombre:
Edad:     



¿Y que hay del contenido de la "pagina2.php"? Pondre el código php necesario para crear un formulario que funcione sin explicarlo todavia:
<?php
 $a = "nuestromail@ejemplo.com";
 $asunto = $_REQUEST['nombre'];
 $cuerpo = "Edad " . $_REQUEST['edad'] . " Experiencia: " . $_REQUEST['exp'];
 mail($a, $asunto, $cuerpo)
 ?>

martes, 19 de julio de 2011

Estructura while en JavaScript

Esta estructura tiene similitudes con la estructura if, el rasgo distintivo que tiene es que la estructura tiene la capacidad de repetirse una y otra vez mientras queramos. Empecemos de nuevo por lo general:

while (condición)
{
comandos
}

Lo que el comando while dice es que mientras la condición se cumpla los comandos se ejecutaran una y otra vez. Ahora veamos qué tiene de útil esto, vamos a hacer un programa que nos escriba los diez primeros números de la tabla del 13 por pantalla:

var resultado, multiplicador;
x=0;
multiplicador=0;
while (multiplicador<10)
{
resultado=multiplicador * 13;
document.write(multiplicador+"x13="+resultado);
document.write('
');
multiplicador=multiplicador+1;
}


while (multiplicador<10)
multiplicador=multiplicador+1;

Las líneas clave aquí son estas dos, como podemos ver en el código los comandos dentro del bucle while se van repitiendo una y otra vez siempre que la variable multiplicador sea menor que 10. La variable multiplicador además la utilizamos para multiplicarla por 13 cada vez para que nos dé un resultado que imprimimos por pantalla. Cuando el bucle llegue a 9 (teniendo en cuenta que hemos empezado en el número 0 se habrá ejecutado ya 10 veces) entonces parará y podremos ver tranquilamente el resultado por pantalla.

document.write(multiplicador+"x13="+resultado);

Recordemos que el comando document.write imprime por pantalla a diferencia del comando alert, que nos mostraba una ventana con el resultado.

document.write('<br>');
Finalmente, esta linea nos sirve para que nuestro documento ejecute la etiqueta de html <br> dejando asi cada operación en una línea distinta haciendo que se pueda ver con mucha más claridad todo.
Para ver lo que se nos muestra clicad en el siguiente botón:


(puede que no funcione ya que me temo que blogger bloquea el código por alguna razón así que os dejo un link a una web que subí para poder ver el código ejecutado, el código se verá en una ventana nueva).


lunes, 18 de julio de 2011

Estructura switch en JavaScript

La estructura switch nos sirve para cuando queremos que un programa haga algo muy concreto dependiendo del valor que tenga una variable. La estructura general es la siguiente:
 
switch (variable)
{
case X: comandos
break;
case Y: comandos
break;
case Z: comandos
break;
default: comandos
break;
}

Y ahora veamos un ejemplo de un programa en el que podamos usar la estructura switch, por ejemplo, queremos que al insertar un número del 1 al 5 el programa nos lo escriba con letras:

var numero;
numero=prompt('Inserte un número del 1 al 5','');
numero=parseInt(numero);
switch (numero)
{
case 1: alert('uno');
break;
case 2: alert('dos');
break;
case 3: alert('tres');
break;
case 4: alert('cuatro');
break;
case 5: alert('cinco');
break;
default: alert('El número debe estar entre el 1 y el 5!');
break;
}

Lo que la estructura switch hace es comparar la variable numero con cada caso que nosotros queramos ponerle, en nuestro idioma sería algo así:

En caso de que la variable sea 1 entonces diremos "uno".
En caso de que la variable sea 2 entonces diremos "dos".
[...]
En caso de la variable no coincida con ningún caso entonces diremos "El número debe estar entre el 1 y el 5!".

En el código anterior además vemos un comando nuevo, parseInt(numero). Esto lo que hace es que el programa trate la variable numero como un valor numérico entero y no como una cadena de texto. Si no hiciésemos esto tendríamos que poner el número de cada caso entre "" de esta manera:

case "x": comandos

El resultado del programa anterior es este:




domingo, 17 de julio de 2011

Estructuras condicionales compuestas y anidadas en JavaScript

Una vez hemos aprendido cómo funcionan las estructuras condicionales simples es muy fácil aprender el funcionamiento de las estructuras condicionales compuestas. De nuevo, veamos un ejemplo de cómo es su estructura general:

if (condición)
{
comandos
}
  else
  {
  comandos
  }

La primera parte de la estructura la conocemos ya, lo único que vemos de nuevo es else. Lo que else marca es que en caso de que no se cumpla la condición se ejecuten otra serie de comandos distinta. Veamos un ejemplo de cómo usarlo:

Crea un programa en el que se inserten dos números y él elija cual es el mayor de los dos:

var primero;
var segundo;
numero1=prompt('Inserta el primer numero','');
numero2=prompt('Inserta el segundo numero,'');
if (numero1>numero2) {
alert(numero1+" es mayor que "+numero2);
}
else {
alert(numero2+" es mayor que "+numero1);
}

El programa nos dirá si el primer número es mayor que el segundo, en caso de que no sea así nos dirá que el segundo número era mayor que el primero. Aquí tenéis el resultado del programa anterior:



Ahora que hemos visto las estructuras condicionales compuestas veamos la estructura de una condicional anidada:

if (condición)
{
comandos
}
  else
  {
    if (condición)
     {
     comandos
     }
      else
      {
       if (condición)
        {
        comandos
        }
      }
    }

Vemos que se crea una condición, si esta no se cumple se sigue a otra condición y así sucesivamente hasta que nosotros queramos que acabe el programa. Ahora veámosla con un ejemplo:

Crea un programa en el que se inserten 3 números y te muestre el mayor de los tres.

var primero,segundo,tercero;
primero=prompt('Primer número','');
segundo=prompt('segundo número','');
tercero=prompt('tercer número','');
if (primero>segundo && primero>tercero)
  {
  alert(primero+" es mayor que "+segundo+" y "+tercero);
  }
  else
    {
    if (tercero>segundo && tercero>primero)
      {
      alert(tercero+" es mayor que "+segundo+" y "+primero);
      }
        else
        {
        alert(segundo+" es mayor que "+tercero+" y "+primero);
        }
    }

He usado el operador lógico &&, éste lo que hace es que se tenga que cumplir más de una condición para que se ejecuten los comandos de la estructura if:

if (primero>segundo && primero>tercero)

Aquí la variable primero tiene que ser más grande que segundo y además la misma variable tiene que ser mayor que tercero para que se cumpla la condición. A continuación dejo el resultado del programa anterior: