www.iplacex.cl

Programación de Componentes Web

Open Source UNIDAD Nº I

www.iplacex.cl

2

SEMANA 1

Tema: Conceptos de servidor web e introducción PHP

Implementación de plataforma para soportar aplicaciones web

Declaración y Sintaxis del lenguaje PHP

Configuración de un servidor

Introducción a los servidores

Ya hemos aprendido diseñar y

construir páginas web con css y html.

También. Hemos agregado

interactividad y dinamismo a nuestras

páginas a través del lenguaje de

programación Java Script. Pero hasta

ahora solo hemos trabajado desde el

lado del cliente. En otras palabras, tu propio equipo genera las peticiones y, a su vez, las

responde. Si tuviéramos, mil equipos, clientes o mil usuarios que solicitarán peticiones,

como abrir una página web específica, conectarse una base de datos o enviar un correo

electrónico, necesitaríamos que alguien se encargara de realizar todo este trabajo. Si

delegáramos. Estas tareas a un computador, este debería tener capacidades y

características superiores a las de un PC de usuario.

www.iplacex.cl

3

SEMANA 1

Es, en estos casos, en donde

necesitamos de la participación de un

servidor quién se encarga de resolver

todas las peticiones de los clientes.

Dentro de los servidores más

utilizados hoy en día. Tenemos los

servidores web, de base de datos, de

archivo de correos. Etcétera.

En esta asignatura, aprenderemos a utilizar un servidor web y de base de datos

¿Qué es un servidor web?

Es una tecnología de

información encargada de

procesar peticiones a través

del protocolo http. Éste último

se utiliza para enviar o

distribuir la información a

través de la world wide web.

Un servidor web

generalmente está

representado por una máquina o computador que tiene instalado aplicaciones

específicas para cuál le otorgan las características de un servidor. Una de sus principales

características es el soporte para el procesamiento de páginas desarrolladas en distintos

lenguajes de programación, por ejemplo, páginas desarrolladas en ASP, JSP y PHP. Etc.

Entre los servidores más populares se encuentran el servidor Microsoft con IIS y Apache.

www.iplacex.cl

4

SEMANA 1

En esta asignatura aprenderemos a trabajar con el servidor Apache y desarrollaremos

páginas dinámicas con el lenguaje de programación PHP.

PHP es un poderoso y eficiente lenguaje de programación del lado del servidor diseñado

especialmente para el desarrollo web y para otorgar dinamismo interactividad a sus

páginas con la capacidad de ser embebido.

Otro punto importante que debemos mencionar es que PHP es una herramienta gratuita

y que cuenta con una amplia documentación y soporte.

Preparación e instalación de apache y php

Para preparar un ambiente de desarrollo en

PHP se deberá instalar los servicios de

apache web y MYSQL, con esto tendremos

nuestro servidor web. Apache existen

múltiples herramientas que nos facilitarán el

trabajo. Entre las más populares encontramos

a XAMP server para sistemas Windows, linux

y OSX, Xamp Server para sistemas Windows

y para sistemas Linux, AMP, para sistemas

OSX.

Existen diferentes paquetes de instalación para los servidores php, entre estos se

diferencian por el comienzo de su nombre, XAMP la más popular sirve para todas las

plataformas, WAMP es solo para Windows, LAMP es solo para Linux, MAMP sirve para

osx y Windows.

En esta asignatura instalaremos el paquete XAMP server para windows.

www.iplacex.cl

5

SEMANA 1

Para descargar XAMP Server. Debemos ir a la página

https://www.apachefriends.org/es/download.html

Busca la versión de tu sistema operativo, luego haz clic en descargar.

Procederemos a instalarlo en la siguiente imagen debemos seleccionar los servicios

requeridos.

www.iplacex.cl

6

SEMANA 1

En nuestro caso solo

seleccionaremos Apache,

MYSQL, PHP y PHPMyAdmin.

Este último es un entorno web

creado principalmente para

trabajar con nuestras bases de

dato de manera bastante cómoda

y sencilla. Continúa con el

instalador selección al idioma y

luego finaliza la instalación. Una

vez terminada la instalación,

abriremos el panel de control de

XAMP Server.

Como puedes ver en la imagen, es

posible iniciar o detener el servidor

Apache y MYSQL. En nuestro caso

solo iniciaremos el servidor Apache

presionando el botón start o iniciar.

Una vez iniciado el servidor Apache

podrás visualizar el número de puerto

por el que se ejecutará y el ID del

proceso.

www.iplacex.cl

7

SEMANA 1

Para establecer una configuración específica sobre el servidor, puedes hacer clic sobre

el botón config. En el caso del servidor Apache, existe un archivo de texto llamado

httpd.conf, ahí podrás definir valores para distintas propiedades, como por ejemplo, el

nombre del servidor, el Puerto de escucha, el tiempo de espera y respuesta a una

petición, etc. Otro archivo importante que encontrarás es el php.ini, el cual está

relacionado con las directivas, el comportamiento e interpretación del lenguaje PHP. Aquí

podrás manipular directamente cada uno de sus parámetros. Por ejemplo, permitir la

subida de archivos al servidor, definir el tamaño máximo de subida de archivos, mostrar

errores sobre las páginas PHP, etc.

Ya hemos iniciado nuestro servidor Apache. Ahora crearemos una carpeta para guardar

los archivos de nuestro proyecto en PHP. Para esto, dirígete a la carpeta htdocs, ubicada

en la siguiente dirección

C:\xampp\htdocs

En donde la letra C corresponde a la partición de tu disco duro, en donde tienes instalado

tu sistema operativo XAMP Server. Ahora, con nuestro editor de texto, crearemos un

archivo con sintaxis PHP. En el contenido del archivo, creamos la estructura de una

página html5 y dentro del cuerpo de ésta programaremos nuestro primer script PHP

www.iplacex.cl

8

SEMANA 1

embebida

Como puedes ver en la imagen de PHP tiene un tag de apertura y otro de cierre. Dentro

de estos tags, es donde programaremos nuestras rutinas de código PHP. En este caso,

estamos utilizando la palabra clave eco, la cual se encarga de mostrar texto por pantalla.

Guarda esta página y asegúrate de que la extensión de ésta sea .php.

www.iplacex.cl

9

SEMANA 1

Para visualizar el resultado,

debes abrir el navegador como

URL. Debes ingresar el nombre

de tu servidor o host, que por

defecto tiene el nombre

localhost. Seguido del host,

debes ingresar el nombre de la

carpeta contenedora de tu

proyecto y luego el archivo. Php

que creaste Si realizaste los

pasos correctamente deberás

ver el resultado mostrado en la imagen.

www.iplacex.cl

10

SEMANA 1

Programando en PHP

Ya viste como programar una simple instrucción en PHP incrustada en una página html.

Ahora conoceremos su sintaxis y operadores para comenzar a desarrollar funciones un

poco más avanzadas.

Como vimos en el ejemplo anterior, para generar una instrucción de PHP debemos

utilizar los tags de apertura y de cierre.

Para declarar una variable, debemos comenzar por agregar el signo peso seguido del

nombre que ésta tendrá. No es necesario definir su tipo, ya que PHP lo genera

automáticamente, dependiendo del valor asignado.

Otra regla fundamental es terminar

con punto y coma cada instrucción

Para utilizar comentarios, tenemos

el doble slash // para comentar sólo

una línea.

Para comentar un bloque de código

se requiere el tag de apertura, slash

asterisco /* y para cerrar el bloque

asterisco slash */.

www.iplacex.cl

11

SEMANA 1

En la siguiente imagen podemos

encontrar los tipos de datos disponibles

en PHP. Como puede ver, los tipos de

datos son similares a los de otros

lenguajes de programación. Lo que

cambia, es la forma de implementarlo o

la sintaxis.

www.iplacex.cl

12

SEMANA 1

En esta tabla encontramos los operadores lógicos y aritméticos para utilizar en nuestras

sentencias o expresiones php. Por ejemplo, si quieres negar una expresión basta con

que agregues el signo de exclamación de cierre, antes de la expresión, este signo negará

la expresión que estuvieras declarando

www.iplacex.cl

13

SEMANA 1

En esta otra tabla encontramos los operadores de comparación. Por ejemplo, si

quisiéramos conocer la igualdad entre dos variables, basta que utilicemos esta

expresión:

If($numero==7)

que quiere decir: Si la variable número es igual a siete, en donde el operador de igualdad

o signo igual se agrega 2 veces.

Para profundizar estos contenidos, te invitamos a utilizar la documentación en el sitio

oficial de pHp.

www.php.net

www.php.net/manual/es

www.iplacex.cl

14

SEMANA 1

Veamos un ejemplo: en la siguiente imagen estamos declarando una variable con

llamada a número que recibe el valor entero 7.

Luego, estamos preguntando si esta variable es mayor que 0, y si es menor o igual a 7.

Si se cumplen las dos condiciones, mostraremos por pantalla el texto con la frase “está

entre 1 y 7”, sino mostraremos la frase “no está entre 1 y 7”.

Para ver este ejemplo, recuerda siempre tener iniciado tu servidor Apache, el cual

puedes iniciar a través de la herramienta Xamp.

www.iplacex.cl

15

SEMANA 1

En el siguiente ejemplo, estamos declarando dos variables: n1 y n2.

Luego declaramos una tercera variable llamada suma, que contiene la suma de n1 y n2.

Finalmente, estamos mostrando por pantalla el texto con la frase “el resultado de la suma

es” y estamos concatenando, la variable suma utilizando el punto como símbolo, como

operador de concatenación. Esto significa que estamos juntando un texto con el

contenido de una variable.

Realiza este ejercicio, ejecuta lo en tu navegador y verás el siguiente resultado:

www.iplacex.cl

16

SEMANA 1

PHP nos permite trabajar y procesar código html de una manera bastante sencilla y

flexible

En una página de tipo php, no es necesario declarar la estructura de un documento html,

y que éste se genera de manera implícita. Debes tener en cuenta también, que la

información que mostramos por pantalla desde PHP se visualizará como html.

En esta imagen estamos creando una variable llamada botónEnlace que contiene la

declaración de un texto enlazable en html

www.iplacex.cl

17

SEMANA 1

En la siguiente línea mostramos por pantalla, a través de la funcionalidad echo, el

contenido de esta variable, la cual se verá como un texto enlazable en formato html. Bajo

este link mostramos por pantalla la declaración de un párrafo en html. También lo

hacemos a través de la funcionalidad echo. De esta manera, dicho párrafo se mostrará

en formato html. Finalmente, fuera de las etiquetas Php, mostramos un texto de

encabezado con la etiqueta H1. Esta es zona html. Por lo mismo, podemos declarar

nuestras etiquetas html sin problemas ni funciones especiales.

Realiza este ejercicio, ejecútalo en tu navegador y verás el siguiente resultado. Como

puedes ver, estamos mostrando sólo información en html dentro de una página Php.

www.iplacex.cl

18

SEMANA 1

Envío de información

Ya hemos visto cómo desplegar información sobre una página html usando PHP. Ahora

aprenderemos a enviar o transportar información por la web.

Cuando dos o más páginas web necesitan enviar o recibir información entre ellas, deben

utilizar un protocolo llamado http o protocolo de transferencia de hipertexto. Es por esto

que las URL de las páginas, comienzan con las siglas http. De esta manera es posible

obtener la información y el contenido de una página.

Este es el proceso de petición y respuesta.

Con php tenemos múltiples

herramientas para manipular la

información enviada a través de

este protocolo. Entre las más

utilizadas, encontramos los arrays

asociativos get, port y request.

www.iplacex.cl

19

SEMANA 1

Supongamos que debemos llenar un formulario con nuestro nombre y fecha de

nacimiento. Y a su vez, tenemos que enviar esta información para ser recibida por otra

página.

Para realizar este ejemplo, comenzaremos por crear un formulario en html con sus

campos correspondientes. Como vemos en la imagen:

Estamos creando un formulario que contiene tres elementos input dentro de sus

etiquetas form, un campo llamado txt nombre, un campo llamado txt fecha y un botón de

tipo submit.

Si miramos el formulario en su etiqueta de apertura, encontraremos el atributo action que

se utiliza para definir el destino de este. En este caso, el destino será la página

recibir_datos.php. Otro de sus atributos que se declaró fue el atributo method, con el

valor get. Esto implica que los campos y valores del formulario se enviarán por la URL y

serán visibles para el usuario.

www.iplacex.cl

20

SEMANA 1

Si utilizaramos como método de envío post los campos no serán visibles por la URL. Con

respecto a los campos del formulario, notaremos que se está declarando un atributo

llamado Name, el cual se utiliza para identificar un elemento de un formulario. El nombre

que definamos aquí será el mismo que utilizaremos para recibirlo en la página de destino.

Finalmente, definimos un botón o elemento de tipo submit, el cual se encarga de enviar

el formulario en la página de destino definida en el atributo action. Si el tipo de este

elemento hubiera sido Button y no submit, el formulario no tendría la capacidad de ser

enviado.

Ahora tenemos que crear la página de destino llamada “recibir_datos.php”. Aquí,

debemos recibir el campo nombre y fecha del formulario. Para esto, debemos saber cuál

es el tipo de método de envío que se declaró en el formulario anterior. En nuestro caso,

ya sabemos que el método utilizado es “get”. Sabiendo esto implementaremos un array

en php. que almacenen los campos del formulario, utilizando la siguiente declaración

cmo ejemplo:

www.iplacex.cl

21

SEMANA 1

“Get”, “nombre del campo” en donde get está relacionado con el método get del

formulario. Si el método de envío hubiera sido post nuestro array debe comenzar como

post.

Si seguimos observando el array, encontramos, entre comillas simples el valor “Nombre

del campo” en donde este corresponde al valor del atributo “name” del campo del

formulario de la página anterior. Tomando en cuenta el ejemplo anterior:

www.iplacex.cl

22

SEMANA 1

Aplicaremos la misma metodología a nuestra página para recibir los datos. Como puedes

ver, a través de php, estamos recibiendo los dos campos del formulario y los estamos

guardando dentro de unas variables para mostrarlas en formato html. El en este caso,

estamos mostrando los campos recibidos dentro de las etiquetas h1.

www.iplacex.cl

23

SEMANA 1

Realiza este ejercicio, ejecútalo en tu navegador y verás el siguiente resultado.

Como vemos en la imagen, estamos mostrando los datos que ingresamos en el

formulario de la página anterior, en formato html. De esta manera, podemos comprender

el funcionamiento de PHP en la web y cómo interactúa con el protocolo http para

transportar información.

www.iplacex.cl

24

SEMANA 1

En esta experiencia de aprendizaje, fuiste capaz de configurar un servidor web que

pueda proveer servicios mediante una aplicación construida en PHP. Además, conociste

los principales paquetes de software que se utilizan para proveer un ambiente de

desarrollo propio y pudiste reconocer las principales características de php. Además, a

través de las actividades realizadas lograste implementar el paquete de software Xampp

en un equipo de Windows y validar las características de intérprete php, incluido. Junto

con esto, pudiste desarrollar una página web con un formulario de inscripción, utilizando

el lenguaje PHP En la próxima experiencia. Aprender a la forma en que los sitios web

pueden almacenar datos de forma temporal y permanente.

www.iplacex.cl

25

SEMANA 1