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