¡Buenas a tod@s!,

Hoy estrenamos este curso sobre desarrollo web usando el lenguaje de moda, PHP. Para ampliar funcionalidades, además aprenderemos a trabajar con uno de los sistemas gestores de bases de datos profesionales más utilizados hoy en día tanto para trabajar con CMS (Gestores de contenidos tipo WordPress, Joomla! o Drupal), como en el desarrollo Web, nos estamos refiriendo a MySQL.

El curso se dividirá en dos grandes partes: la primera, explicaremos detalladamente como programar con PHP. Mientras que en  la segunda, aprenderemos como utilizar MySQL mediante la utilización de PHPMyAdmin, para más tarde poder enlazar una web realizada en PHP con una BBDD (base de datos) creada con MySQL para que podamos trabajar con datos almacenados (agregar, editar, eliminar y mostrar datos).

Para esta última parte, como sé que muchos de vosotros nunca han realizado una base de datos de forma profesional (SQL, MySQL, Oracle), vamos a realizar un pequeño curso sobre introducción a las bases de datos para ver desde cero cómo se diseñan hasta como implementarlas aprendiendo el lenguaje estándar ANSI SQL:1999.

Los únicos requisitos son:

  • Nociones básicas de HTML:

Conocimientos de HTML, desde las etiquetas básicas como <p></p> o <strong></strong>, hasta saber utilizar formularios. Pero si queréis repasar un poco los temas y refrescar la memoria, este libro gratuito os servirá de gran ayuda, aunque llegado el momento, os facilitaré la comprensión del código HTML-PHP en los ejemplos mediante comentarios.

  • Y… ¡Muchas ganas de aprender!:

Se han de realizar todos los ejemplos escribiendo vosotros mismos el código fuente, aunque os lo inserte dentro de los ejemplos, ya que es así como verdaderamente se aprende a programar, y sobre todo, a detectar fallos propios y evitar realizarlos en un futuro.

Y con todo esto, ¡Empezamos!

1. Introducción

PHP (PHP Hypertext Pre-processor) es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas e interactivas.

En este punto, debemos saber diferenciar dos grandes tipos de lenguajes web:

  • Lenguajes de tipo cliente:

Son lenguajes que pueden ser interpretados por los navegadores web (Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, etc.) sin ningún pre-tratamiento.

Ejemplos de estos lenguajes pueden ser:

– HTML: Es un lenguaje basado en etiquetas y de carácter estático. Define el formato de una página, y permite insertar elementos, texturas i multimedia.

– JavaScript: Permite la creación de interfaces y páginas web dinámicas.

– XML: Es un metalenguaje, es decir, un lenguaje que permite definir otros lenguajes.

  • Lenguajes de tipo servidor

Son lenguajes que permiten dotar a las páginas web de una forma dinámica e interactiva. Se insertan dentro de las páginas HTML y nos permiten acceder en tiempo real, por ejemplo, a una base de datos para consultar, modificar o insertar información en nuestra página.

Ejemplos de estos lenguajes pueden ser:

– ASP: Es la tecnología o lenguaje desarrollado por Microsoft para la creación de páginas web dinámicas. Su problema más notable es que solamente funciona con un tipo de servidor específico, el IIS (Internet Information Services) de Microsoft.

– Perl: Es un lenguaje de propósito general que se utiliza para la administración de sistemas de desarrollo web o programación en red.

– PHP: Es un lenguaje robusto y potente de programación web e insertado en documentos HTML. Ha sido diseñado especialmente para desarrollar páginas web. Su código es libre, abierto y es totalmente gratuito. Funciona correctamente con todo tipo de servidores y todas las plataformas.

Se usa principalmente para la interpretación del lado del servidor. La parte que el usuario verá es la parte cliente, cuando éste hace una petición al servidor para que le envíe una página web, el servidor ejecuta el intérprete de PHP, éste procesa el script solicitado que generará el contenido de manera dinámica (por ejemplo obteniendo información de una base de datos). El resultado es enviado por el intérprete al servidor, quien a su vez se lo envía al cliente.

Diagrama de petición de una página web:

Pasos:

  1. El navegador efectúa la petición de la página.
  2. El servidor llama al intérprete PHP.
  3. PHP ejecuta los Scripts (interactuando con una BBDD MySQL por ejemplo) y devuelve al servidor el documento generado.
  4. El servidor envía el documento generado en HTML.
  5. El documento es interpretado por el navegador (Si este documento contiene elementos Flash o Java, el navegador interactúa con estos Plugins para que se puedan mostrar correctamente en el navegador).

PHP permite la conexión a diferentes tipos de servidores de bases de datos tales como MySQL (La que emplearemos nosotros), PostgreSQL, Oracle, ODBC, DB2, Microsoft SQL Server, Firebird y SQLite.

 2. Servidores

Un servidor es un ordenador totalmente optimizado y dedicado a:

  • Gestionar el uso de la red
  • Ofrecer recursos
  • Almacenar archivos

Hay muchos tipos de servidores, por ejemplo:

  • Servidores de archivos: almacenan y distribuyen archivos.
  • Servidores de correo: Almacenan, envían, reciben i enrutan correos electrónicos.
  • Servidores Web: Este tipo de servidores son los que nos interesan, ya que almacenan y ejecutan peticiones que recibe del cliente (Navegadores Web).

2.1. Los servidores web

Es un tipo de servidor que mediante el protocolo HTTP habilita la posibilidad de acceder a sus recursos.

Ejecuta las peticiones que recibe del cliente (Peticiones desde los navegadores web).

Algunos tipos de servidores web son:

  • Apache (Apache Software Fundation. Este es el que nosotros utilizaremos)
  • IIS (Microsoft)
  • Cherokee (Otro servidor gratuito con licencia pública general de GNU)

2.2. Servidor web Apache

Las características de este servidor son:

  • Servidor web con protocolo HTTP
  • Multiplataforma (UNIX, Microsoft, MacOS, etc.)
  • Modular (Puede ser adaptado por diferentes entornos o necesidades)
  • Código abierto (Realimentación de los usuarios haciendo mejoras, detectando errores, etc.)

2.3. Instalación

Debemos instalar los elementos necesarios para hacer funcionar y crear páginas web dinámicas en nuestro ordenador local como:

  • Servidor Web (Apache)
  • Intérprete (PHP)
  • Base de datos (MySQL)

Hay dos formas de realizar esta instalación:

  1. Descargar todo por separado e ir instalando uno a uno todos los paquetes.
  2. Instalar un paquete que contiene las tres cosas.

Nosotros nos decantaremos por la 2º opción, y utilizaremos un programa llamado easyPHP (Desde este enlace lo podéis descargar).

EasyPHP es un paquete de software gratuito que nos instala en nuestra máquina un servidor web (Apache), el intérprete (PHP) y MySQL. Hay muchos programas parecidos a este (XAAMP, WAMP5), pero creo que este es el más fácil e intuitivo de todos y cubre todas nuestras necesidades.

3. Instalación de easyPHP

Para instalar easyPHP en nuestro ordenador:

  • Descarga easyPHP desde su web www.easyphp.org
  • Hacemos doble-clic en el ejecutable descargado (instalador)
  • Seleccionamos un directorio de instalación y seguimos adelante haciendo caso del asistente hasta finalizar.

3.1. Iniciando easyPHP

Cuando hemos instalado easyPHP, veremos este icono en nuestra barra de tareas:

Si pulsamos el botón derecho del ratón sobre este icono nos mostrará un menú como este:

Si lo veis en inglés, ¡TRANQUILOS! Si vais a Configuration->EasyPHP, os mostrará una ventana como esta:

En el menú desplegable de Idioma (Language) seleccionáis Spanish, y pulsad OK.

Y ya está, ya tenemos traducido al Español easyPHP.

Ahora pasamos a describir los diferentes apartados del menú anterior:

  • Ayuda: Enlaces de ficheros de ayuda sobre cómo trabajar con PHP.
  • Ficheros LOG: Nos permite ver el contenido de los archivos .LOG de Apache y MySQL. Estos ficheros almacenan las incidencias que se producen durante su funcionamiento.
  • Configuración: Ficheros de configuración de easyPHP.
  • Configuración->Apache: Directivas de configuración del servidor.
  • Configuración->Extensiones PHP: Se despliegan las extensiones (bibliotecas) disponibles en PHP y su estado (activadas o desactivadas).
  • Configuración->PHP: Fichero de configuración PHP.
  • Configuración->MySQL: Fichero de configuración de MySQL.
  • Configuración->PHPMyAdmin: Abre el navegador predeterminado en la parte de administración de BBDD.
  • Configuración->EasyPHP: Da acceso al cuadro de configuración de easyPHP.
  • Explorar: Nos dirige a la carpeta “www” que es donde se ha de guardar nuestras webs PHP
  • Administración: Nos abre una ventana de nuestro navegador predeterminado y nos sitúa en la página de administración de easyPHP, donde podemos acceder a nuestras Web Locales, a MySQL mediante PHPMyAdmin y observar más información sobre PHP como sus funciones disponibles.
  • Web Local: Nos abre una ventana de nuestro navegador predeterminado y nos sitúa en la página donde veremos todas las webs (por carpetas) que tenemos guardadas. Si dentro de “www” en la raíz de la carpeta tuviésemos archivos del estilo index.html o index.php no se mostrarían las carpetas, sino que abre automáticamente esta página. Esto también se cumple en las subcarpetas de “www”.
  • Reiniciar: Reinicia easyPHP.
  • Detener: Para easyPHP.
  • Salir: Sale completamente easyPHP deteniendo todos sus servicios.

3.2. Nuestra primera web en PHP

Hay muchas maneras de programar en PHP y hay muchos editores de texto adecuados (por ejemplo, especializado en HTML o PHP con resaltado de sintaxis, etc.).

En nuestro curso voy a recomendar el que es para mí el mejor editor para programadores, Notepad++ (Pulsa para descargar).

Notepad++ es un editor de código fuente que soporta la sintaxis de varios lenguajes de programación, y sus principales características son:

  • Resaltado y plegado de sintaxis
  • Resaltado de sintaxis y plegado de código definido por el usuario.
  • PCRE (Perl Compatible Regular Expression) Buscar / Reemplazar
  • Mapa del documento
  • Auto-completado
  • Multi-Documento (interfaz en pestañas)
  • Multi-View
  • WYSIWYG (impresión)
  • Zoom in y zoom out
  • Multi-idioma
  • Marcadores
  • Grabación y reproducción de Macros (Pequeños programas para automatizaciones)

Cuando tengamos instalado Notepad++, lo ejecutamos, y directamente nos mostrará una pestaña nueva en blanco como la de la imágen inferior (si es la primera vez que se abre, la primera página que se muestra son los cambios realizados en la versión instalada respecto a las anteriores. La cerramos (botón dereccho sobre la pestaña y pulsamos la opción “Cerrar“), y pulsamos en el menú superior Archivo->Nuevo o la combinación de teclas rápidas Ctrl+N y nos creará una hoja en blanco nueva y vacía).

Si pulsamos con el botón derecho del ratón en el icono de easyPHP en la barra de tareas, y seleccionamos “Explorar” nos mostrará la carpeta “www“.

Esta carpeta es la que debe contener todos nuestros códigos y páginas PHP, y así el interprete PHP del servidor podrá procesar el código fuente sin problemas y mostrarlo por nuestro navegador predeterminado. Si alojamos alguna página PHP fuera de esta carpeta, no se ejecutará correctamente.

Para facilitar la estructura de cada ejemplo, crearemos una carpeta para cada ejemplo dentro de la carpeta “www”.

Para hacer nuestra primera web en PHP, crearemos lo que es un estándar de facto en el aprendizaje de cualquier lenguaje de programación, y es crear lo que normalmente se le nombra como un “Hola, Mundo!“.

Dentro de la carpeta “www” creamos la carpeta “001-holamundo“. Pondremos numeración a cada carpeta y así tendremos un orden cronológico creado de los ejemplos realizados durante el curso.

Ahora nos situamos nuevamente en el programa Notepad++.

Escribiremos el siguiente código HTML:

Ahora pasaremos a insertar un código PHP en el cuerpo (<BODY>) del HTML:

La orden “echo” de php, nos hace la función de mostrar un mensaje, en este caso “¡Hola, Mundo!“, pero más adelante veremos que tiene más funcionalidades.

Otra parte imprescindible para este lenguaje es finalizar cada comando con un punto y coma (“;“). Sin él, el intérprete de PHP nos devolverá un error crítico y ni siquiera iniciará la ejecución del script.

Sin embargo PHP ignora completamente los espacios en blanco y los saltos de línea (salvo en las definiciones de cadenas). Esto quiere decir que tanto podemos poner todo un script en una línea como sangrar cada línea tanto como queramos o dejar varias líneas en blanco.

Ahora guardamos este documento dentro de la carpeta “001-holamundo” que habíamos creado dentro de “www” como “index.php” y pasamos a comprobar el resultado.

Si pulsamos con el botón derecho del ratón en el icono de easyPHP en la barra de tareas, y seleccionamos “Web Local” nos mostrará una página web que será el contenido de la carpeta “www” con nuestro navegador predeterminado. Como hemos creado la carpeta “001-holamundo” dentro, solo veremos esta, así que si pulsamos encima, y nos mostrará el resultado final.

¡Enhorabuena, ya hemos realizado nuestra primera página web con HTML+PHP!

Hasta aquí la primera parte de este curso. La semana que viene empezaremos con un trabajo un poco más duro aunque muy interesante gracias a eso podremos hacer un código más complejo, nos adentraremos en la ¡sintaxis de PHP!

Para cualquier duda u opiniones sobre el curso, dejad vuestros comentarios.

Saludos,

Info| Wikipedia, PHP.net, Notepad++, Librosweb.es

Descargas | easyPHP, Notepad++