Capítulo I: Fundamentos Básicos de Análisis Numérico y Programación

Un algoritmo es una secuencia finita y ordenada de instrucciones que han de seguirse para resolver un problema. Dicha definición es la base misma de la programación pues lo que hace un lenguaje de programación es traducir un algoritmo.

Hoy en día, existen diferentes técnicas de programación, unas más complejas de otras y en ocasiones algunas no pueden ser utilizadas con cualquier lenguaje de programación, las dos técnicas más comunes son:

• Programación estructurada
• Programación orientada a objetos

La programación estructurada es una forma de escribir programas de manera clara. Para ello utiliza únicamente tres estructuras: secuencia, selección e iteración o instrucciones secuenciales, condicionales y repetitivas.

Una de las herramientas que utilizan los programadores para traducir sus algoritmos en un lenguaje de programación cualquiera es el pseudocódigo, o falso lenguaje. Es decir, utilizando un lenguaje NO programable o inexistente que permita darle una estructura traducible a un determinado algoritmo.

Mediante el análisis del pseudocódigo quien incursione en el mundo de la programación puede comprender la lógica que requiere el escribir un determinado programa y facilita la comprensión de cualquier otro lenguaje. Es por ello que en este capítulo describiremos las estructuras de control y los elementos fundamentales de un programa usando un pseudocódigo que traduciremos más adelante.

Pseudocódigo y estructura de un programa

Podemos considerar que la ejecución básica de un algoritmo debe obedecer un cierto orden. Siguiendo este principio podemos afirmar que todo programa cuenta con una cabecera y un cuerpo donde se incluyen diferentes elementos. Claro, siendo la sintaxis de algunos lenguajes mas o menos restrictiva.

En esencia la estructura básica de un programa es;

1. Cabecera.
1. Programa.
2. Modulo.
3. Tipos de datos.
4. Constantes.
5. Variables.
2. Cuerpo.
1. Inicio.
2. Instrucciones.
3. Fin.

1.1 Programa

Se refiere al nombre con el cual identificamos nuestro algoritmo, en pseudocódigo se define como:

dijo:

algoritmo

dijo:

algoritmo
CONST
pi = 3.1416

dijo:

algoritmo
CONST
pi = 3.1416
var
real: radio, resp

En este ejemplo, hemos declarado la constante pi, y estamos declarando dos variables de nombre “radio” y “resp” que contendrán datos de tipo numérico real.

1.5.1 Tipos de datos

En casi cualquier lenguaje de programación existen ciertos tipos de datos fundamentales, estos pueden ser de tipo numérico, cadenas y datos boléanos, aunque en cada lenguaje existe un identificador para cada tipo de dato. En este capítulo consideraremos únicamente:

Numérico

Cadena

Boléanos

Solo pueden contener valores verdaderos o falsos, por ejemplo cuando evaluamos condiciones o bucles repetitivos.

2.1 Inicio

Todo programa e instrucción debe tener un inicio y un final, dicho elemento puede definirse sea con una palabra clave, o con un carácter, en nuestro pseudocódigo lo definiremos como:

dijo:

algoritmo
CONST
pi = 3.1416
var
real:radio, resp
Inicio

NOTESE que no estamos considerando ningún delimitador entre las instrucciones, en nuestro pseudocódigo estamos considerando que un salto de línea delimita el fin de la instrucción.

2.2 Instrucciones

Las instrucciones son las operaciones que se realizaran durante la ejecución del programa. OJO que he mencionado una palabra clave muy importante. “operaciones” y estas serán definidas por ciertos “operadores”

Operadores

Un operador, es un elemento que controla la ejecución del programa. Y existen operaciones de asignación, operadores aritméticos, relacionales y operadores lógicos.

Operadores de Asignación

Los operadores de asignación permiten asignarle un determinado valor a una variable. En nuestro pseudocódigo utilizaremos el signo “=” como nuestro operador de asignación.

Operadores Aritméticos

Como su nombre lo indica, son operadores que se utilizan usualmente para ejecutar operaciones aritméticas entre variables o bien entre variables y números. En pseudocódigo utilizaremos:

Operadores relacionales

Son aquellos que se utilizan para evaluar si una condición es verdadera o es falsa. Y se utilizan principalmente en las instrucciones selectivas y las instrucciones repetitivas.

Operadores lógicos

2.2.1 Instrucciones Secuenciales

Las instrucciones secuenciales son aquellas que se ejecutan línea por línea, por ejemplo para el caso del cálculo del área de un círculo.

algoritmo 
CONST
pi = 3.1416
var
real: radio, resp
inicio
radio = 2
resp = pi*radio^2
fin

Como podemos observar, en este programa se le asigna un valor a la variable radio utilizando un operador de asignación, posteriormente se le asigna a la variable resp el valor que resulte del cálculo de la constante pi por el valor de la variable radio elevado al cuadrado.

Este programa funciona, y si existiera un compilador para nuestro pseudocódigo probablemente no devolvería ningún error, sin embargo este programa en esencia no sirve para nada, pues en principio no se comunica con el usuario y tampoco solicita que el usuario ingrese un radio así que únicamente puede calcular el valor de un círculo de radio 2

Datos entran datos salen

Para que un programa sea útil para el usuario, debe comunicarse con él, solicitar información y mostrar información. Es por eso, que en nuestro pseudocódigo utilizaremos las palabras “Escribir” y “Leer” para comunicarnos con el usuario. De modo que escribir, lo utilizaremos para mostrar un mensaje al usuario y leer para recibir información del mismo y almacenarla en una variable.

De esta forma podríamos hacer que nuestro programa sea un poco más útil.

algoritmo 
   CONST
      pi = 3.1416
   var
      real: radio, resp
inicio
     escribir("Ingrese el radio de la esfera: ")
     leer(radio)
     resp = pi*radio^2
     escribir("El Area del circulo es: ",resp)
fin

Esta vez, nuestro programa solicita al usuario que ingrese el radio de la esfera, una vez que el usuario lo ingresa el programa lo almacena en la variable “radio” para calcular después el valor de la variable “resp” para mostrar el valor de resp después con otro escribir.

NOTESE: que el texto plano se ingresa entre comillas a diferencia de las variables, en casi todos los lenguajes de programación se sigue este principio

dijo:

Ejercicio N.1

diseñe un pseudocódigo que solicite al usuario dos tres números, sume el primero con el segundo, el segundo con el tercero y muestre el resultado del cociente entre los dos resultados.

2.2.2 Instrucciones Selectivas

Llamamos instrucciones selectivas a las que requieren de una condición previa para ser evaluadas. Y normalmente se las conoce como condicionales, pueden ser simples, dobles, anidadas y múltiples.

Selectivas Simples

Requieren de una sola condición a ser evaluada, para este ejemplo vamos a utilizar un caso donde el usuario debe ingresar su edad para saber si puede ingerir o no alcohol. Por lo que utilizaremos una sola variable. “edad”

algoritmo 
var
real:edad
inicio
escribir("Ingrese su edad: ")
leer(edad)
si edad > 18 entonces
escribir("Usted puede ingerir alcohol con moderacion")
fin-si
escribir("usted no puede ingerir alcohol")
fin

Ahora, una vez que el usuario introduce su edad, la selectiva simple evalúa si es o no mayor de 18, si el usuario es mayor de 18 entra a la sentencia condicional si no, simplemente la salta y pasa a la siguiente línea.

Aunque este ejemplo es válido, no muestra el uso correcto de las instrucciones selectivas pues la frase “usted no puede ingerir alcohol” debería estar dentro del condicional como una negativa a la primera condición.

NOTESE: que la sentencia finaliza con un fin-si es decir un FIN para el SI

Selectivas dobles

Se consideran sentencias que evalúan una condición, si dicha condición no se cumple entonces realizan otra acción siempre dentro de la misma estructura condicional. Por ejemplo para el caso anterior la sintaxis seria:

algoritmo 
var
real:edad
Inicio
escribir("Ingrese su edad: ")
leer(edad)
si edad > 18 entonces
escribir("Usted puede ingerir alcohol con moderación")
si-no
escribir("usted no puede ingerir alcohol")
fin-si
Fin

En este ejemplo se muestra una sintaxis más elaborada que no depende del modo en que se ejecuta el programa sino de las estructuras de control que se incluyen.

Selectivas anidadas

Básicamente, una selectiva anidada es una selectiva dentro de otra selectiva, podemos anidar un sinnúmero de estructuras, para no perder el hilo de nuestro programa, es importante que aprendamos a comentar nuestro código. Un comentario es básicamente una línea de código que no es leída y en nuestro pseudocódigo los representaremos como en php con una doble barra “//”

Vamos a analizar un ejemplo en el que se le solicita al usuario los tres lados de un triangulo para saber si es equilátero, escaleno o bien si es isósceles.

algoritmo 
var
real:lado1, lado2, lado3
inicio
escribir("Ingrese los lados del triagulo: ")
leer(lado1, lado2, lado3)
//inicio de la selectiva
si lado1 != lado2 entonces
//ya sabemos el primer lado no es igual al segundo
si lado2 != lado3 entonces
//todos los lados son diferentes
escribir("El triangulo es escaleno")
si-no
//uno de los lados es igual
escribir("el triangulo es isosceles")
fin-si
si-no
//ya sabemos que el primero es igual al segundo
si lado2 != lado3 entonces
//tenemos dos lados iguales
escribir("el triangulo es isosceles")
si-no
//todos los lados son iguales
escribir("el triangulo es equilatero")
fin-si
fin

Como podemos observar no es demasiado complicado, la parte difícil es el razonamiento de la lógica que seguirá el programa, es decir el diseño del algoritmo. El uso de selectivas anidadas requiere plantearse un esquema mental del procedimiento que seguirá al programa antes de empezar a escribir líneas de código.

NOTESE: La sintaxis coloreada se utilizara de aquí en adelante a fin de definir los elementos propios del pseudocódigo, las variables y las cadenas de texto definidas por el programador.

Selectivas Múltiples

Una selectiva múltiple es una instrucción que nos permite realizar determinada acción en caso de que una variable “x” tome un valor “y” se utiliza la palabra clave “Según sea” para definir el segmento integrado por una selectiva múltiple.

Por ejemplo si quisiéramos un programa que nos escribiera en letras los números del 1 al diez permitiéndole al usuario ingresar un numero en dicho rango nuestro pseudocódigo seria más o menos así:

algoritmo 
var
entero:numeros
inicio
escribir("ingrese un numero del 1 al 10")
leer(numeros)
Segun sea  hacer
1: escribir("uno")
2: escribir("dos")
3: escribir("tres")
4: escribir("cuatro")
5: escribir("cinco")
6: escribir("seis")
7: escribir("siete")
8: escribir("ocho")
9: escribir("nueve")
10: escribir("diez")
si-no
escribir("Numero no valido")
fin-segun
fin

Como hemos observado, en el caso de las selectivas múltiples son instrucciones que se ejecutan en caso de existir opciones predefinidas para una determinada situación. Por ejemplo, podríamos programar una calculadora que ejecutara una determinada acción para cada uno de los operadores aritméticos (OJO tratando cada operador como una variable de tipo carácter).

2.2.3 Instrucciones repetitivas

Las instrucciones repetitivas son aquellas que se ejecutan mientras se cumpla una condición. Dichas instrucciones deben ser finitas y contar siempre con un mecanismo de escape.

Instrucción repetitiva mientras

La instrucción mientras señala que un determinado procedimiento se ejecutara mientras una condición “X” sea verdadera. Existe en la mayoría de los lenguajes de programación incluyendo php.

Nos permite por ejemplo, evaluar los números del 1 al 10 sumando aquellos que sean pares para mostrar al final la suma de los mismos.

algoritmo 
var
entero: i, ac
inicio
i = 0
ac = 0
mientras i < 10 hacer
si i % 2 == 0 entonces
ac = ac + i
si-no
ac = ac
fin-si
i = i + 1
fin-mientras
escribir("la suma de los números pares del 1 al 10 es: ",ac)
fin

En principio se declararon las dos variables, i un contador y ac un acumulador ambas de tipo real, después se inicializaron (siempre se debe inicializar las variables asignándoseles un valor cuando se utilizaran en instrucciones repetitivas)

Se evalúa si i es menor que 10, como i vale 0 para la primera secuencia entra al bucle mientras, se evalúa si el resto de i y 2 es 0 para evaluar si es un numero par, si lo es, se suma al acumulado “ac” si no, únicamente se le suma uno a i que regresa a evaluar si i es menor que 10 y así sucesivamente hasta que la condición i menor que 10 ya no se cumpla.

Estructura repetitiva "para"

Otra estructura repetitiva que conviene estudiar es la estructura para, que repite una acción desde x igual a n1 hasta n2 con un incremento de 1 o bien un incremento especificado por el usuario.

A diferencia de la estructura mientras, la estructura para siempre incluye un contador que repetirá la instrucción x número de veces. Así pues, el ejemplo anterior puede ser escrito utilizando la estructura para, cuya sintaxis es:

algoritmo 
var
entero: i, ac
inicio
ac = 0
para i = 0 hasta 10 hacer
si i % 2 == 0 entonces
ac = ac + i
si-no
ac = ac
fin-si
fin-para
escribir("la suma de los números pares del 1 al 10 es: ",ac)
fin

NOTESE: Que a diferencia de la estructura mientras, la variable contador se inicializa dentro de la propia estructura. Además el incremento si no se especifica siempre será de +1

2.3 Fin

Todo programa, debe incluir un fin, aunque en los ejemplos anteriores lo hemos incluido y se sobreentiende que cada instrucción y procedimiento debe incluir un fin-procedimiento es importante recalcarlo en este apartado.

Conclusiones

Se han estudiado los elementos comunes de cada uno de los lenguajes de programación, un paso importante para aprender cualquier otro lenguaje, sea este compilado o bien sea interpretado.

Aunque muchas de las características aquí descritas, principalmente la declaración de variables no ha lugar en php, es importante considerar que aunque no se declaran, los tipos de variable existen aun en php.

Así pues, esta introducción a la programación es perfectamente válida para php, tanto como para C, pascal o cualquier otro lenguaje, claro que se modificaron algunos operadores y procedimientos en nuestro pseudocódigo para ajustarlo al trabajo que realizaremos con php.

Capítulo II: Preparando el espacio de trabajo

Es conveniente que si no sabes NADA de HTML entres al post Creando un sitio web desde 0 antes de realizar PHP para todos, puedes hacerlo aquí:

http://www.taringa.net/posts/hazlo-tu-mismo/11958962/_Tutorial_-Creando-un-sitio-web-desde-0-parte-1.html

Aunque hoy en día, existen muchos IDEs para trabajar con php, por ser el que más se ajusta a nuestras necesidades y por ser el que hemos utilizado en otros cursos como “Creando un sitio web desde 0” vamos a utilizar Dreamweaver.

Si no lo tienes, puedes descargarte la versión de prueba desde el sitio oficial de Adobe, nosotros en este tutorial trabajaremos con la versión CS5 por ser la más nueva. NO utilizaremos en absoluto más que en la configuración más básica, el modo diseñador de Dreamweaver, o vien desde aqui:

http://www.taringa.net/posts/downloads/11957966/Pack-Disenadores---Adobe-CS5-Full.html

Si utilizas Linux o bien Windows pero no deseas descargar Dreamweaver puedes seguir este tutorial utilizando eclipse o cualquier otro IDE.

Si prefieres no utilizar ningún software adicional, también puedes trabajar con el bloc de notas. Al fin y al cabo, lo que si necesitaremos y está disponible de forma gratuita es un servidor. Tanto para Linux como para Windows, podemos descargarnos xampp desde el sitio oficial

http://www.apachefriends.org/es/xampp.html

Una vez que lo hemos instalado, conviene que iniciemos apache y MySQL. No requeriremos nada más por el momento.

Una vez que hemos iniciado apache, vamos a iniciar Dreamweaver para configurar el servidor con el que vamos a trabajar y la dirección donde guardaremos nuestros archivos.

En la pantalla de Inicio de Dreamweaver, vamos a seleccionar, Nuevo… Sitio de Dreamweaver.

Si has leído Creando un sitio web desde 0 este procedimiento te será muy familiar, recuerdas cuando dijimos que no especificaríamos nada en “Servidor” esta vez ha cambiado. Php necesita ser interpretado y hemos instalado un servidor en nuestra PC para hacerlo.

Ojo con la dirección, en mi caso voy a ubicar mi sitio en C:xampphtdocsphpya puedes variar la dirección de la ultima carpeta, pero siempre debes ubicar tu sitio dentro de la carpeta htdocs de xampp

En la pestaña servidores haremos clic sobre “+” para agregar un nuevo servidor, y donde configuraremos así nuestro nuevo sitio

Ahora, crearemos un nuevo archivo php

Y vamos a escribir lo siguiente entre el

Damos vista previa en el navegador y deberíamos de ver algo más o menos así:

Aunque no te has dado cuenta de cómo, has escrito tu primer programa en php, pero bueno… no es la gran cosa, sin embargo prueba que hemos instalado apache, php y lo hemos configurado correctamente en Dreamweaver.

NOTESE: Para quienes utilicen algún otro software como eclipse o bien bloc de notas, basta con guardar los documentos dentro de la carpeta htdocs de xampp y ejecutar desde localhost para ejecutar sus programas.

Capítulo III: Introducción a PHP

¿Vale que era hora de empezar con php he? Aunque hemos descrito los elementos básicos de un programa en el capítulo I es hora de trabajar específicamente con php.

Inicio del programa

Para indicarle al servidor que un lenguaje, o un segmento de un sitio está escrito en php y debe ser traducido por el intérprete se señala dicho programa con:



Así mismo, el programa debe finalizar con

?>

Todas las sentencias incluidas entre estos símbolos serán interpretadas y traducidas para devolver un elemento escrito en HTML. Por ejemplo, si en un sitio escribirnos:

El navegador lo traducirá como

Por otro lado, si escribimos

A la hora de visualizarlo en el navegador recibiremos el siguiente mensaje de error

De modo que de aquí en adelante, lo UNICO que podremos escribir entre las sentencias será en efecto, PHP.

Constantes

Las constantes en php se declaran utilizando la función define(), y ubicando entre paréntesis en nombre de la constante y su valor. Por ejemplo, para definir el valor constante de pi, seria:


define("PI","3.1416")?>

Variables

Un elemento fundamental en cualquier lenguaje de programación son las variables, en PHP no hace falta declararlas antes de asignarles un valor, de hecho una variable se declara en el momento en que se le asigna un valor, dicha declaración la realiza el interprete en el momento de la ejecución.

Debemos tener presentes los tipos, pues no podemos sumar una variable de tipo cadena con una variable de tipo numérico.

Para declarar una variable en php, basta con utilizar el signo $ para identificar el elemento como una variable y asignarle un valor cualquiera. Si dicho valor es una cadena, debe estar entre comillas. Por ejemplo:

$a = “http://taringa.net”

En nuestro programa, vamos a definir varias variables a fin de trabajar mas adelante con ellas.

Definiremos una de tipo entero, una de tipo real, una de tipo cadena y una de tipo booleana.

NOTESE: que se usa “;” como delimitador para cada expresión, esto es importante pues le permite al intérprete identificar cada instrucción.

Como se puede observar, basta con asignarle un valor a nuestra variable para declararla. El texto escrito tras las // es un comentario y será ignorado por el interprete.

Salida de datos

PHP, hace uso de elementos propios de HTML como dispositivos de entrada, estos son los formularios. Sin embargo, antes de comprender el uso de dichos elementos, debemos repasar las instrucciones selectivas y las instrucciones repetitivas.

Así pues, por el momento, únicamente trabajaremos con programas predefinidos que muestren datos. La función equivalente a nuestro “escribir” en pseudocódigo es “echo”

Y funciona de la siguiente forma:

echo “Hola Mundo”;?>

Esto imprimiría en el navegador:

Utilizando la función echo entonces podríamos darle algún formato a nuestro texto utilizando HTML. Por ejemplo

Que imprimirá

Esta es la forma en la que HTML sirve de “consola” a PHP

Vectores

Un array, es una colección de valores, y pueden ser unidimensionales, bidimensionales o multidimensionales, Nos permiten almacenar una variedad de datos que son delimitados por un identificador que puede ser numérico o bien una cadena, si no se especifica un valor, este será numérico y comenzara desde 0, se ubica entre dos corchetas.

Se definen de la siguiente forma:

En el navegador, dicho programa imprimirá

Manuel

OJO que no definimos identificadores para el array, por lo tanto este empieza desde 0, donde el valor de la variable $nombre será Juan.

Otra forma de definir arrays, y nos permite crear estructuras mas complejas es utilizando la función array, y su sintaxis es la siguiente:

$variable = array(“valor” => “contenido”, “otro valor” => “contenido”)

Y en un programa, donde anidamos un par de arrays:

Que en el navegador imprimiría:

Ing Civil

Operadores

Así como con nuestro pseudocódigo php cuenta con sus propios operadores, las principales variaciones respecto a nuestro pseudocódigo son los valores de asignación pues aunque se mantiene “=” como principal operador de asignación en php se mezclan operadores de asignación con algunos operadores aritméticos sin embargo no es un requisito realizar las operaciones de esta manera.

Instrucciones Secuenciales

Ahora, si consideramos nuestro primer pseudocódigo, podríamos calcular el área de un círculo en php utilizando la siguiente sintaxis.

Si hacemos vista previa en el navegador, podremos observar:

Aunque claro, no es algo demasiado agradable a la vista, podemos entonces agregarle algún texto para mejorar la apariencia de nuestro resultado:

NOTESE: que para concatenar cadenas de texto y variables no se utilizan “,” con en pseudocódigo, sino “.”

En el navegador seria:

Otra forma de expresar este mismo resultado hubiera sido:



Y el resultado sería el mismo pues en php las variables embebidas en el texto son tratadas como tales.

Aunque queda algo tosco esa es la idea, claro que podríamos agregarle estilos CSS y seguro quedaría mucho mejor, sin embargo ese es un tema que tocamos en el post anterior, y no hace falta que volvamos a tocarlo. Aquí estamos aprendiendo a programar. Se supone que ya el diseño es cosa de niños ;-).

Instrucciones Selectivas

En pseudocódigo, llamábamos al elemento que definía una sentencia condicional “si” en php dicho elemento es “if” y su sintaxis es la siguiente.

Recordemos aquel ejemplo en el que evaluábamos si una persona tenía o no edad para ingerir alcohol. Si traducimos nuestro pseudocódigo a PHP sería algo más o menos así (obviando la entrada de datos que veremos más adelante):

Ahora, basados en este ejemplo podemos deducir que la sintaxis es:

if (Condición)
{
Instrucción 1;
Instrucción 2;
}
else
{
Instrucción A;
Instrucción B;
};

Es importante observar que antes de “else” no se incluye un “;” lo que indica al intérprete que no se ha terminado de ejecutar la sentencia condicional, si lo incluyéramos habría un error de sintaxis.

En php, podemos anidar nuestras sentencias condicionales tal y como lo estudiamos en el capítulo I, pero además en php podemos incluir condiciones adicionales dentro de la condición principal utilizando la estructura “elseif”. Que funciona de la siguiente forma.

Supongamos un programa que nos indique si un número tiene uno, dos o tres dígitos:

Dicho programa imprimiría en el navegador:

Instrucciones selectivas múltiples

Las instrucciones selectivas múltiples permiten al evaluar si una variable cualquiera toma X o Y valores. Su sintaxis es muy similar a la que describirnos con nuestro pseudocódigo. La palabra clave que delimita la estructura de control es switch, y su sintaxis, por ejemplo para una calculadora es:

Podemos observar un caso que bien puede aplicársele a una calculadora muy rudimentaria, donde la variable $signo será evaluada, y se realizara la operación pertinente de acuerdo a su valor predefinido.

NOTESE que la palabra break, indica que de cumplirse la condición, inmediatamente el puntero sale de la declaración switch. Y no se incluye en la última declaración.

El resultado en el navegador de la sentencia seria:

Instrucciones Repetitivas

Como hemos visto en capítulos anteriores, las instrucciones repetitivas son aquellas que se repiten hasta que se cumpla una determinada condición. Analizamos el ejemplo de “Mientras” y “Para” es hora de saber cómo representamos estas funciones en php.

En el caso de la sentencia while, su sintaxis y funcionamiento en php es muy similar a lo ya estudiado en nuestro capitulo de introducción a la programación. Es una sentencia que ejecuta un procedimiento mientras una condición x sea verdadera.

Por ejemplo, si quisiéramos evaluar los números del 1 al 100 evaluando aquellos que son divisibles entre tres, podríamos ejecutar una sentencia que los recorra evaluándolos uno por uno.

Este programa imprimiría en el navegador:

Y es un claro ejemplo de la sintaxis de while, donde debemos delimitar el bucle agregando un límite para la repetición del ciclo y un mecanismo que permita que el programa eventualmente alcance dicha condición, en este caso utilizamos un operador de autoincremento

dijo:

$i++

Php además cuenta con la estructura “para” representada por la palabra clave “for” y cuya sintaxis es:

dijo:

for(inicializamos la variable; establecemos la condición; especificamos el incremento)

Es probablemente una estructura mas cómoda cuando de trabajar con bucles definidos se trata, el mismo ejemplo anterior puede ser escrito utilizando la estructura repetitiva for.

Esto tendría el mismo resultado en el navegador, así pues obtendríamos algo como esto:

Aunque claro, ninguno de estos programas es demasiado útil, pues solo imprimen datos, no permiten al usuario ninguna clase de interacción con la aplicación, es por eso que en el siguiente capítulo nos dedicaremos de lleno a la entrada y manipulación de datos desde php.

Capítulo III: La interacción con el usuario

Aunque nuestros programas en este momento son funcionales y podríamos generar un sitio completo escrito en php con solo la instrucción echo, nos hace falta mucho para programar aplicaciones en php, uno de los elementos primordiales que hemos omitido ha sido la interacción con el usuario.

Para el manejo de formulario, usualmente es necesario crear dos paginas, una con el formulario y otra que procese la información del mismo, claro que podríamos hacerlo en la misma página, sin embargo por ahora, trabajaremos con un archivo que contenga el formulario y uno que procese los datos, es por eso que vamos a crear dos nuevos archivos.

Uno llamado procesar.php y un .HTML llamado formulario.

Ahora vamos a trabajar sobre nuestro archivo .HTML, en el vamos a crear un campo de texto y le añadiremos un botón a nuestra interfaz, esto lo haremos entre las etiquetas:

Estas indican que estamos creando un nuevo formulario, el método de envió de las variables será a través del método post, esto porque:

• Con GET los datos son encadenados al URL especificado en action, utilizando el tipo de codificación especificado en el atributo enctype. Este método se utiliza cuando los datos no modifican la base de datos, por ejemplo, al realizar una búsqueda, y los caracteres a enviar tienen que pertenecer obligativamente al conjunto ASCII.

• Con el método POST se realiza una transacción mediante el protocolo HTTP, utilizando la codificación enctype. Se utiliza para aplicaciones que modifican la base de datos de destino.

Así pues, el método de envió de la variable se realiza de la siguiente forma:




Con el atributo acción se especifica la pagina a la que se envía la información, claro que no voy a entrar en detalles con la sintaxis HTML pues no es el objetivo de este curso.

Después agregaremos una etiqueta y una caja de texto de la siguiente forma:


Ingrese su nombre:






OJO a los atributos de la caja de texto (“nombre”) pues este atributo será el que recogeremos en nuestro archivo .php, por su parte el botón “confirmar” es el que ejecuta la acción “procesar.php” si ya has leído "Como crear un web desde 0" no tendras problemas con la sintaxis en HTML.

El resultado en el navegador de este documento es:

Ahora vamos a la parte que nos interesa, vamos a procesar el contenido de la caja de texto “nombre”

Para eso, en nuestro archivo .php vamos a escribir la siguiente cadena:


$nombre = $_REQUEST['nombre'];
echo $nombre;?>

Esto nos permitirá recoger el valor de la caja de texto nombre y almacenarla en la variable $nombre. Podemos agregarle algún texto adicional para mejorar nuestra salida al usuario:

Esto generara algo mas o menos así:



Una vez que hacemos clic en confirmar…



Podemos observar que nuestro programa ha recibido datos del usuario y los ha utilizado, aunque claro no ha hecho gran cosa. Y de hecho no podemos hacer demasiado con solo nuestra “Caja de texto”

Es por eso que vamos a conocer otros elementos de un formulario y como trabajar con ellos a fin de delimitar las opciones que tiene el usuario y hacer funcionar mejor nuestro programa.

Control RadioBox

Vamos a escribir un pequeño formulario en el que incluiremos dos “radio” que son valores que el usuario puede seleccionar, puede seleccionar solo uno de ellos. Y se le asigna el valor con el atributo “value”

Esta vez, aprovechando que podemos asignarle un valor estático al radio, vamos a crear una pequeña calculadora.

OJO que el “name” de los RadioBox es el mismo, esto porque el usuario solo podrá seleccionar uno de ellos.
En el navegador nuestro formulario se vería más o menos así (a menos claro que hayan incluido estilos para mejorarle la apariencia):

Una vez creado el formulario, vamos a escribir nuestro procesar.php donde incluiremos un switch para evaluar cada operación.

Así pues, escribimos dos sifras en nuestro formulario, damos clic al botón “Enviar consulta” veremos algo como esto:

Claro que convendría ofrecer algún link para regresar a la página anterior, pero en principio, hemos creado una calculadora que puede sumar, restar multiplicar y dividir en PHP con la ayuda del control “radio”

Control Checkbox

¿Pero si necesitáramos que el usuario pudiera seleccionar más de una opción de una lista predefinida?

HTML nos ofrece un elemento muy interesante que nos permitiría en efecto ofrecer al usuario la posibilidad de elegir más de una opción, su nombre es “checkbox” y su sintaxis para un programa cualquiera seria:

Como vemos, solo hemos reemplazado el control “radio” por el control “checkbox” en el mismo programa (al que hemos quitado un par de operaciones a fin de aclarar únicamente la función del control).

OJO que esta vez, cada checkbox tiene un nombre distinto, ahora, nuestro programa en PHP seria:

Usamos la función isset() que nos permite evaluar si una variable toma algún valor, de esta evaluación imprimimos la suma y la resta de los dos valores, el resultado de estos dos documentos en el navegador seria:

En caso de solo seleccionar “suma” veremos

En caso de seleccionar sumar y restar veremos en el navegador que una vez que se ha procesado la solicitud en PHP se ha evaluado la suma y la resta. Por lo que imprimirá:

Control Select

Otro elemento que nos permite interactuar con el usuario mostrándole una lista de valores predefinidos es el control Select, que permite al usuario seleccionar una sola opción de una lista. Usualmente se utiliza cuando las opciones son muchas (a diferencia del radiobox que se utiliza para listas más reducidas)

Ahora, podemos observar que se ingresan las opciones entre la etiqueta “Select” cada una de las opciones por su parte se indican utilizando la etiqueta “option”, modificando solo un poco nuestra primera calculadora, obtendremos algo asi en PHP:

Y el resultado en nuestro navegador sería algo más o menos así:

Y nuestro resultado:

Con que hemos creado una calculadora un poco más profesional, o al menos de apariencia más agradable para el usuario. Claro que nuestro objetivo va mucho más allá. Deseamos crear sitios dinámicos y hemos obviado uno de los controles más importantes. El área de texto.

Control TextArea

A diferencia de nuestro clásico textbox, el control área de texto permite al usuario ingresar múltiples líneas de texto, aunque su sintaxis no es muy diferente de la sintaxis de un textbox.



Y la captura de datos desde este control tampoco es muy diferente. Solo hace falta agregar un $_request[‘nombre’] para obtener los datos de una caja de texto. Por ser su funcionamiento idéntico al de un textbox. No voy a detallarlo.

Funciones

Si bien no las estudiamos en nuestro capítulo I, son sumamente importantes, y permiten crear programas muy complejos. En palabras sencillas son como algoritmos individuales que pueden ser llamados para la resolución de un problema.

Usualmente se declara una función cuando ejecutaremos el mismo procedimiento en más de alguna ocasión, estas pueden contener parámetros; es decir, valores que serán reemplazados por otros al momento de ejecutarse la función.

En PHP, las funciones se declaran de la siguiente forma:

dijo:

function nombre (parámetros) {
instrucciones
}

Para llamar a una función basta con escribir su nombre y los parámetros que se le asignan; un ejemplo:

Como podemos observar, únicamente pasamos los parámetros a la función para hacerla funcionar valga la redundancia. Vale, pero eso ha sido muy sencillo. Más adelante le daremos un uso más práctico a las funciones.

Interacción con bases de datos

Aunque hemos aprendido mucho sobre programación estructurada, PHP no es un lenguaje demasiado funcional si no interactúa con una base de datos. Y es que acceder y almacenar datos, es vital para cualquier aplicación Web.

La base de datos mas empleada para su uso con aplicaciones escritas en php es MySQL, además de ser Open Source, es completamente gratuita; y viene por defecto en XAMPP.

En este capitulo, vamos a desarrollar un pequeño CMS (Gestor de contenido) que nos permita, actualizar un sitio Web de forma dinámica. Además, vamos a integrar nuestro sistema en un sitio escrito fundamentalmente en HTML.

A partir de este momento, dejaremos un poco de lado la teoría y nos enfocaremos en la práctica. Por tanto, vamos a configurar nuestro nuevo espacio de trabajo

Preparando nuestro espacio de trabajo

Vamos a escribir en nuestro navegador:

http://localhost/phpmyadmin/

Y veremos una pantalla como esta:

Donde crearemos una nueva base de datos, en mi caso la nombre “tutorial” a continuación nos solicitara información para crear una nueva tabla, en mi caso la llamare “artículos” y constara de 4 campos.

id: Contendrá un identificador único para cada articulo, será clave primaria y de tipo auto_incremento

menu: Aquí almacenaremos el nombre que tendrá cada elemento de nuestro menú relacionado con nuestro articulo

titulo: Aquí almacenaremos el titulo del articulo en cuestión

arto: Aquí almacenaremos el titulo en si

También, podemos crear la tabla haciendo una consulta SQL desde el gestor de phpmyadmin

CREATE TABLE `base`.`articulos` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `menu` TEXT NOT NULL , `titulo` TEXT NOT NULL , `arto` TEXT NOT NULL
) ENGINE = MYISAM ;

Una vez que creamos nuestra tabla, ahora, como con cualquier programa vamos a diseñar un esquema que nos permita identificar cada uno de los elementos que necesitaremos para echar a andar nuestro programa.

1. INDEX

En nuestro Index, vamos a presentar la información que deseamos que nuestros usuarios lean, además vamos a mostrar un menú dinámico que nos permita modificar el contenido de la pagina con solo un clic y en el mismo documento.

Para lograr esto, vamos a incluir tres archivos dentro de nuestro index, uno que lea las opciones pasadas por el menú y muestre el contenido del articulo, uno que muestre el titulo del articulo y el propio contenedor para el menu, de modo que en nuestro index, vamos a incluir:

Como vemos, estoy utilizando el sitio que creamos en Como crear tu web desde 0 como lienzo sobre el cual trabajar, de hecho únicamente he tomando mi index.html y le he cambiado la extensión a index.php, mas adelante veremos como hacer estos includes, por el momento únicamente estamos planteando los objetivos de este curso.

2. PANEL DE ADMINISTRACION

Vamos a diseñar un pequeño panel de administración donde poder agregar nuevo contenido, eliminar contenido viejo y además editar el contenido ya existente.

Conexión con la base de datos

Vale, primero lo primero, para poder interactuar con los datos de una base de datos, tenemos que conectarnos con la misma, ¿cierto?

Vamos a crear un nuevo archivo al que llamaremos conect.php en este almacenaremos los datos para conectarnos con nuestra base.

La sintaxis para entablar una conexión con la base de datos es:

La función mysql_connect nos permite realizar la conexión con la base de datos, los parámetros de dicha función son (“host”,”usuario”,”contraseña”) si la conexión falla, entonces se ejecuta “die” es decir, imprimirá que existe un problema en la conexión.

Por otra parte, como quizás habrán adivinado, la función mysql_select_db nos permite seleccionar una tabla de la base de datos haciendo uso de un recurso de conexión (en este caso la variable conexión).

Ahora, si ejecutamos este programa, no imprimirá nada, pues no es un programa que podamos utilizar sino uno que vamos a incluir en la ejecución de otro. Es importante que señalemos que para cualquier operación con la base de datos es necesario incluir este script.

Alta de registros en una tabla

Esto se hace, llamando a la función INSERT de MySQL sin embargo, primero debemos definir ¿Qué es lo que vamos a insertar en nuestra tabla? Crearemos un nuevo archivo llamado “insertar.php” y vamos a crear un pequeño formulario donde solicitaremos al usuario un nombre para el elemento del menú, un titulo para el artículo y contenido para el mismo.

Hasta el momento, nada nuevo, crear un formulario es algo muy básico y lo hemos practicado bastante en capítulos anteriores, así que no vamos a detallar los elementos del mismo; Ahora la parte que nos interesa, el programa que procese los datos del formulario.

En principio, definimos un if (isset()){ }, para asegurarnos que la variable que envía el formulario exista, si esta existe entonces incluimos nuestro archivo “conect.php” que realiza la conexión a la base de datos y selecciona nuestra tabla. Para después proceder a realizar la consulta.

La función para realizar una consulta en nuestra base de datos es:

[codemysql_query(“consulta”,”recurso de conexión”)[/code]

Una vez hemos realizado la consulta, cerramos la conexión con MySQL, utilizando la función

Y la consulta que vamos a realizar es:

INSERT into “tabla”(campo1,campo2,campo3) VALUES (valor1, valor2, valor3)

mysql_close(“recurso de conexion”)

Ejecutado el programa con éxito, concluiremos con un mensaje que muestre que la ejecución ha sido exitosa; Ahora, que sucede si ejecutamos nuestro programa, pues veremos algo como esto en el navegador:

Aunque estamos ingresando los datos de forma correcta en nuestra base de datos, No hay forma de que podamos verlos, por eso vamos a crear un documento que nos permita leer los datos que tenemos almacenados en nuestra base de datos.

Ahora, OJO… lo que necesitamos es un script que lea un determinado articulo, es decir que debemos pasarle una variable al script.

Pasar una variable por URL

Algo interesante en php, es que podemos pasar una variable aun determinado archivo con solo enviarla a través de la URL. Para hacerlo, utilizamos la siguiente sintaxis

Enlace

Para capturar esta variable en nuestro archivo.php debemos utilizar el método

$_GET[‘variable’]

De modo que para mostrar la variable “variable” vamos a utilizar la siguiente sintaxis

Echo $_GET[‘variable’];?>

Selección de registros en una tabla

Hecha esta aclaración, vamos a crear un archivo al que llamaremos leer.php, y su contenido será:

Vamos por partes, en principio capturamos la variable op, esta variable la enviaremos a travez del menu, después evaluamos si la variable $opcion existe, si es así significa que se he enviado una variable por la URL y por tanto vamos a realizar una consulta a la base de datos para mostrar el contenido asignado al id de la variable.

Para eso, en primera instancia vamos a incluir nuestro archivo conect.php, y después haremos un query del tipo select cuya sintaxis es:

dijo:

SELECT campo FROM tabla WHERE campo = valor

Ahora, algo importante es que el realizar esta consulta NO devuelve el valor del campo, únicamente almacena en la variable $respuesta una referencia a los datos almacenados en el campo seleccionado.

Para recuperar esos datos hacemos uso de un while y de la función mysql_fetch_array() esta funcion retorna un vector asociativo con los datos del registro rescatados. De modo que la variable $existe se transforma en un vector que contiene los datos rescatados de la consulta.

Entonces, mientras $existe exista, el bucle while nos devolverá el contenido de la clave [‘arto’]
Si acaso no se paso ninguna variable por la URL, el script devolverá el contenido de la pagina de inicio (el ultimo echo que esta cortado en la imagen)

Ahora, ¿como incluimos estos resultados en nuestro index.php? Exacto, es lo que estabais pensando, haremos un include en el area que destinemos para nuestro contenido, de esta forma:

Si corremos nuestro index.php en nuestro navegador veremos algo como esto:

Al no pasar ninguna variable a través de la URL, nuestro script simplemente nos muestra la pagina que definimos por defecto, sin embargo si agregamos a nuestro index.php?op=1

¡VOILA! Veremos el contenido que ingresamos en nuestra base de datos, para el campo #1

Vamos por buen camino, sin embargo, aun nos hace falta crear un menu para acceder a los elementos de nuestro contenido. Vamos a crear un archivo menu.php y en el vamos escribir un script que liste los valores de la tabla para el campo menu con un formato de hipervínculo

El script es muy parecido al ejemplo anterior, con la única diferencia que estamos solicitando en nuestra consulta una referencia a TODOS los datos del campo “menu” y TODOS los datos del campo “id”

De esa forma, construimos un hipervinculo dinámico que pase por URL la variable correspondiente al id de nuestro articulo, para que leer.php pueda mostrar el contenido de dicho articulo.

Cuando incluimos este script en nuestro index.php:

En principio, vamos a introducir el primer elemento de la lista, que corresponde a nuestro index.php y después hacemos nuestro include del archivo que recién creamos, de modo que en el navegador veremos algo como esto:

Únicamente, nos hace falta incluir los títulos de nuestro contenido, esto lo hare con un archivo llamado leertitulos.php, que sera muy parecido a nuestro leer.php

Lo incluimos donde mas nos guste en nuestro index.php, aunque claro esto no hace falta que lo explique.

Hemos terminado con nuestro index.php, y por ende con nuestro INDEX sin embargo nuestro panel de administración aun esta muy incompleto y es que solo tenemos un formulario para ingresar datos a nuestra base de datos. Datos que eventualmente podríamos necesitar editar o bien eliminar.

Dar de baja un registro en la tabla

Una tarea que vamos a realizar muy a menudo, es eliminar un registro, pero claro para eliminar un registro, primero necesitamos enlistarlos, esto lo haremos exactamente como en los ejemplos anteriores, crearemos un archivo al que llamaremos listedit.php y vamos a incluir el siguiente script

Como siempre, vamos a incluir nuestro archivo conect.php de modo que accedamos a nuestra base de datos. En este script se envia el parametro del a travez de la URL dentro del while, si este parametro es enviado entonces se ejecuta el query:

dijo:

DELETE FROM tabla DONDE campo=valor

Si no se envía este valor, únicamente seguimos ejecutando el script que enlista cada uno de los elementos de nuestra base de datos, sin embargo no hace falta que detalle esto pues hemos hablado suficiente de cómo enlistar valores. La única diferencia con los ejemplos anteriores es que los enlistamos a modo de tabla.

Esto en el navegador, Se vería más o menos así:

Aunque editar por supuesto aun no funciona pues no hemos creado nuestra página de edición.

Actualizar un registro en la base de datos

Vale, ahora vamos a crear una página donde podamos editar nuestros datos, vamos a llamarle editar.php y vamos a crear el siguiente formulario:

Probablemente os preguntarais que es eso de “hidden” pues un campo oculto no es mas que un elemento de formulario que no se puede editar, lo utilizaremos para almacenar el valor de la variable antes de ser modificada.

Con respecto a $mostrar[‘campo’] si, es exactamente lo que creen, parte de un php que aun no hemos escrito, pero que llamara a dichos valores desde una base de datos.

Efectivamente, lo único nuevo en este script es la consulta a MySQL que no es mas que:

dijo:

UPDATE tabla SET campo=valor_nuevo WHERE campo=valor_viejo

De igual forma, definimos si se ejecuta uno u otro segmento del script considerando las acciones del usuario, Veamos el script completo:

Y en el navegador, si hacemos click en “editar” de nuesto listedit.php, veremos algo como esto:

De modo que de esta forma podemos editar los elementos de nuestra base de datos, pero vamos a ponerlo todo junto para crear un precario panel de administración, pero que valga para esta guía introductoria. Ahora, este panel de administración debe estar protegido pues no deseamos que cualquier usuario de nuestro sitio tenga acceso a modificar nuestra información.

Creando un sistema de autentificación

Estamos considerando que nuestro sitio únicamente será editado por una persona, por lo que haremos un sistema de autentificación muy básico para nuestro panel de administración.

En primera instancia, vamos a mover todos los archivos que pertenecen al panel de administración a una carpeta del mismo nombre, en mi caso he creado un archivo index2.php donde he incluido el contenido de los otros archivos. (esto no hace falta explicarlo pues lo hemos visto para nuestro index.php) en la misma carpeta, vamos a crear un nuevo documento de nombre index.php

Vamos a crear un formulario que solicite al usuario el username y la contraseña para entrar al área de administración:

Ahora, Vamos a introducir un cartelito que diga “Introduce tu clave” si no se ha enviado ninguna, o bien “Clave equivocada” si el usuario ha introducido una clave incorrecta.

Entonces, en el navegador no veremos mas que un formulario, sin embargo dado que el archivo login.php aun no existe, es un formulario que no tiene ninguna utilizad, por eso, vamos a crear un nuevo documento llamado login.php

En esta pagina, mediante una cláusula condicional evaluamos si los valores del campo corresponden a los del usuario del panel de administración:

Si los datos corresponden, entonces creamos una sesión con la función session_start(); también podríamos usar una cookie, pero una variable de sesión es mas segura que una cookie pues se almacena en el servidor.

Después, asignamos un valor a nuestra variable de sesión en $_SESSION[‘valor asociativo’] y procedemos a redireccionar al usuario a nuestro index2.php si la contraseña no es correcta, unidamente mandamos al usuario a la pagina index.php con un valor de retorno.

Si probamos este sistema, en teoria funciona sin embargo un usuario podria simplemente escribir en el navegador url/administración/index2.php y tendria acceso a nuestro panel de administración, entonces debemos restringir ese acceso.

Para eso vamos a crear un nuevo archivo que incluiremos en todos los documentos que deseemos restringir, le llamaremos llave.php

En este script, evaluamos si el contenido de la variable $_SESSION es “si”, contenido que se le asigna tras comprobarse que el campo de username y pass corresponde con la clave y contraseña, si el contenido de la variable $_SESSION es diferente de “si” entonces enviamos al usuario a la pagina de login.

Ahora, solo hace falta incluir el archivo llave.php en cada uno de los archivos que deseamos restringir.

De modo que si intentamos acceder a los mismos por URL, nos enviara a la pagina de login. Ahora solo hace falta crear un documento que finalice la session del usuario, yo le llamare salir.php

Un link a este archivo permitirá al usuario terminar la session, aunque si no hace click la sesión terminara al cabo de un determinado tiempo de inactividad.

Finalmente hemos creado un sitio interactivo, con contenido dinamico, que probablemente puede quedar mucho mejor, pero eso lo dejo a su creatividad, mi objetivo con este pequeño curso es unicamente mostrar las nociones basicas para la creación de un sitio web dinamico con el uso de php y MySQL, mas adelante en futuros cursos aprenderemos un poco mas sobre JavaScript y DHTML.