Preparar el Entorno de Trabajo

Para poder probar los scripts que vayamos desarrollando, necesitaremos 3 elementos principales: el analizador PHP, el servidor web y un navegador.

03-Nov-2016

La finalidad de los siguientes módulos del curso será mostrar cómo utilizar PHP para la ejecución de scripts de parte del servidor. Para poder probar estos scripts necesitaremos 3 elementos principales: el analizador PHP, el servidor web y un navegador. El navegador no supone ningún problema, ya que todos disponemos en nuestro ordenador de varios navegadores, pero los otros dos elementos a menos que no tengamos contratado un servicio de hosting y un dominio asociado, será casi imposible probar los scripts que vayamos desarrollando.

Para prepararnos un entorno de trabajo, instalaremos en nuestro ordenador un servidor de pruebas que incluya estos elementos esenciales. De los tres servidores locales comentados en el primer módulo, vamos a instalar ‘WampServer’.

Instalar WampServer

Descargar el programa

Lo primero que haremos será acceder a la web http://www.wampserver.com/en/ desde donde podemos descargar la última versión disponible de 32 o 64 bits según el sistema que tengamos instalado en nuestro ordenador.

Descarga WampServer

Actualmente está disponible la versión 3.0.6 que incluye:

  • Apache v2.4.23 (Servidor web)
  • PHP versiones 5.6.25 y 7.0.10 (pudiendo utilizar la que nos interese en un momento dado)
  • MySQL v5.7.14 (Servidor de BD)
  • phpMyAdmin v4.6.4 (Administrador web para las BD de MySQL)

Al pulsar sobre el enlace para de realizar la descarga, nos mostrará una serie de advertencias a tener en cuenta:

Avisos previos a la descarga
  • Tener instalados los paquetes redistribuibles de Visual Studio 2012 VC11, antes de realizar la instalación de WampServer. En realidad se nos exige tener los paquetes de Microsoft Visual C++ desde la versión 2008 hasta la 2015 y todas sus actualizaciones (VC9, VC10, VC11, VC13 y VC14).

Es muy importante tener en cuenta que si no tenéis instalados los paquetes de Microsoft Visual C++, tendréis que instalarlos antes de iniciar la instalación de WampServer.

En la siguiente dirección, http://wampserver.aviatechno.net/?lang=es&prerequis=afficher podréis encontrar enlaces a todos los paquetes VC necesarios así como herramientas de comprobación antes de realizar la instalación de WampServer.

  • No instalar esta versión si ya tenemos instalada la versión 2 o paquetes de versiones anteriores. Primero tendremos que desinstalar la versión anterior realizando copias de nuestros proyectos antes de instalar la nueva versión.

 

Realizar la instalación

Antes de iniciar la instalación os recomiendo ejecutar la herramienta ‘check_vcredist.exe’ descargable desde la dirección comentada en el apartado anterior. Esta utilidad nos indicará si tenemos instalados todos los paquetes de Visual C++ necesarios.

Una vez descargado el programa de instalación, realizaremos la instalación típica de los programas de Windows. El asistente nos irá realizando una serie de preguntas para configurar la instalación final.

  • Primero seleccionaremos el idioma de instalación.
  • Como en todo programa, aceptaremos los acuerdos de la licencia.
  • El siguiente paso mostrará una ventana de información, donde se nos advierte de que si no tenemos instalados y actualizados los paquetes VC9, VC10, VC11, VC13 y VC14 de Microsoft, el programa no podrá funcionar.
Información acerca de la instalación de WampServer
  • Si nos desplazamos por el contenido de la información veremos la sección --- Visual C++ Packages ---, donde se nos ofrecen los enlaces para descargar estos paquetes para 32 y 64bits.
Información Paquetes Visual C++
  • Si no los tenéis instalados, cancelar la instalación, descargar los paquetes, instalarlos y volver a iniciar la instalación.
  • Los siguientes dos pasos simplemente hacen referencia a la carpeta donde instalar el programa (por defecto en c:\wamp64 o c:\wamp según sea de 64 o 32bits) y el nombre del acceso directo.
  • Cuando el programa esté preparado para realizar la instalación, procederá a ir copiando los archivos a la carpeta de instalación e irá iniciando los servicios necesarios.
Proceso de instalación
  • Durante este proceso se iniciará el servidor Apache y el cortafuegos de Windows nos mostrará una alerta de seguridad para darle permiso de comunicación con el exterior. Tendremos que permitirle el acceso a las redes privadas, ya que sino no podrá funcionar de forma correcta.
Permitir acceso a Internet a Apache
  • Luego nos preguntará si deseamos cambiar el navegador por defecto (IE) utilizado por WampServer y el editor de textos por defecto (bloc de notas). Para el caso del navegador, os recomiendo cambiarlo por Firefox o Chrome.
Cambiar el navegador por defecto para WampServer
Cambiar el editor utilizado para editar las configuraciones de WampServer
  • El último componente que se instala es phpMyAdmin para poder gestionar nuestras bases de datos, donde el instalador nos informa de que el acceso se realizará por medio del usuario ‘root’ y que no tiene establecida contraseña.
Indicaciones acerca de la instalación del componente PhpMyAdmin
  • El final de la instalación mostrará información de los componentes instalados y que para iniciar nuestro servidor local utilicemos el acceso directo creado en nuestro escritorio.
Pantalla final instalación WampServer

Iniciar el servicio

Cuando ejecutemos el acceso directo de WampServer del escritorio se iniciará el servidor mostrándose en el área de notificaciones de Windows el icono de programa. Este icono irá cambiando de color a medida que se vayan iniciando los servicios pasando de rojo a  naranja y finalmente a verde, lo que indicará que todo funciona de forma correcta.

Icono de estado de WampServer

Si pulsamos sobre el icono de WampServer, nos mostrará un menú con las siguientes opciones:

  • Localhost: acceder al host local a través del navegador
  • phpMyAdmin: abrir el administrador de bases de datos phpMyAdmin
  • VirtualHosts: muestra los hosts virtuales que hayamos configurado en nuestro servidor. Muy práctico a la hora de estar desarrollando varios proyectos en modo local, donde cada uno pueda tener una dirección de host distinta.
  • www directory: nos mostrará en el explorador de archivos el directorio raíz de nuestros proyectos
  • Apache: submenú con información acerca de la versión y archivos de configuración del servidor
  • PHP: submenú con información acerca de la versión de PHP que estemos utilizando, desde donde podemos cambiar entre las versiones 5 y 7 de PHP. También nos permite modificar la configuración de PHP y activar/desactivar sus extensiones.
  • MySQL: submenú con información acerca de la versión del servidor de bases de datos, modificar su configuración y acceder a la consola de MySQL.

En la parte inferior del menú encontraremos las opciones que nos permiten iniciar, detener y reiniciar todos los servicios.

Menú de la barra de estado de WampServer

Comprobar su funcionamiento

Para comprobar el funcionamiento correcto del servidor, seleccionaremos la orden ‘localhost’. Si todo es correcto, nos mostrará en la ventana de nuestro navegador una página de información con la información sobre nuestro servidor y el acceso a herramientas y proyectos desarrollados.

Página de información localhost de WampServer

Si pulsamos la herramienta phpinfo(), nos mostrará información acerca de la versión de PHP que se está ejecutando en nuestro servidor.

Información PHP seleccionado en nuestro servidor local

Instalar el IDE para desarrollo en PHP

Seleccionar un editor

Aunque para crear los scripts PHP sólo necesitamos un simple editor de textos como pueda ser el ‘bloc de notas’, siempre es de agradecer disponer de programas más completos que nos ayuden y faciliten la escritura de nuestros archivos php.

En este sentido podemos optar por entornos de desarrollo integrado o ‘IDE’, editores multilenguaje ligeros y potentes y editores web.

Entornos de desarrollo integrado (IDE):

  • Dreamweaver CC (de pago): una muy buena opción de un clásico en el desarrollo web.
  • NetBeans (gratuito): estupendo para el desarrollo de proyectos en PHP (os lo recomiendo). Es un poco complejo de utilizar al principio, debido a la multitud de opciones y configuraciones que ofrece.
  • PhpEd (de pago): IDE para PHP (PHP IDE), HTML, CSS, XML, SMARTY, XHTML y otros.  Presenta una combinación equilibrada de editor avanzado de código, depurador DBG fiable, y otras características avanzadas.
  • Eclipse PDT (gratuito): es un IDE de PHP basado en la plataforma de desarrollo libre Eclipse. Eclipse PDT es un programa Java, por lo que se necesita instalar previamente Java Runtime Environment.

Editores multilenguaje:

  • PSPad(gratuito): herramienta sencilla y potente, con resaltado sintáctico automático según el tipo de archivo con el que se trabaje.
  • Atom (gratuito): editor multiplataforma con resaltado sintáctico automático y función de autocompletar sentencias.
  • Notepad++ (gratuito): otro editor multilenguaje, potente y que permite la instalación de plugins para aumentar sus prestaciones.
  • Bluefish (gratuito): potente y muy rápido que al igual que el resto de los editores multilenguaje permite el resaltado de instrucciones, crear proyectos, etc.
  • Aptana Studio 3 (gratuito): desarrolla y prueba toda tu aplicación web utilizando un único entorno. Con soporte para las últimas especificaciones de tecnología de navegador como HTML5, CSS3, JavaScript, Ruby, Rails, PHP y Python.

Como ya os he comentado al principio de este módulo, no podemos dejar de lado el tema del editor o entorno de desarrollo que utilicemos para escribir nuestros scripts PHP. En este sentido os recomiendo utilizar un estupendo IDE como es NetBeans. Si bien resulta un poco complicado al principio para los que no estén acostumbrados a los IDE por la cantidad de opciones, configuraciones y plugins admitidos es una opción estupenda para comenzar con un entorno robusto y potente con el que desarrollar nuestros proyectos.

A continuación comentaremos brevemente los pasos para la instalación del IDE NetBeans para PHP.

Desde la dirección: https://netbeans.org/downloads/index.html, descargaremos el instalador que tiene un tamaño aproximado de 117 Mb.

Tendremos que seleccionar el idioma con el que deseamos que se muestre el entorno del IDE, la plataforma donde se instalará: Windows, Linux o MAC y si es para sistemas x86 o x64.

Página de descarga de NetBeans PHP

El proceso de instalación es idéntico a cualquier otro programa para Windows, donde seguimos los pasos del asistente: presentación, acuerdo de licencia, carpeta de instalación, etc... hasta completar la instalación. Tendremos que ser pacientes ya que el proceso se toma su tiempo.

Ventana de NetBeans

Cuando abramos el IDE de NetBeans, nos mostrará una ventana de inicio donde podemos encontrar enlaces muy interesantes a  ‘Demostraciones y tutoriales’ sobre el desarrollo de aplicaciones en distintos lenguajes entre los que se encuentra PHP. También nos ofrece un enlace para ‘Probar un proyecto de ejemplo’ de los que vienen con la instalación de NetBeans.

Pantalla de inicio del IDE NetBeans
Probar proyectos de ejemplo

Para crear los archivos php, pulsaremos sobre el primer botón de la barra de herramientas ‘Archivo Nuevo..’ y seleccionaremos el tipo de archivo php que deseamos crear.

Crear nuevo archivo en NetBeans

De entre la lista de tipos de archivos que nos ofrece cabe destacar los siguientes:

  • PHP File: crear archivos que contienen únicamente código php
  • PHP Web Page: crear scripts embebidos en páginas HTML
  • PHP Class: para crear clases en PHP
  • PHP Interface: crear interfaces para la programación de clases en PHP

Video Demostrativo