Primeros pasos con WampServer

¿Qué es?

En este tutorial vamos a aprender a utilizar WampServer. Según su web oficial, WampServer es un entorno de desarrollo en Windows, que permite crear aplicaciones web con Apache2, PHP y bases de datos MySQL.

La página oficial se encuentra en:

http://www.wampserver.com/en/

¿Cómo lo instalo?

Para empezar, tenemos que descargar el servidor sde la página oficial, en el apartado «Download«. Ahí elegimos la versión que se ajuste a nuestro sistema operativo (actualmente, lo normal es que sea de 64 bits).

Nos aparece otra ventana, en la que damos a «download directly«:

Una vez descargado, lo instalamos. El proceso de instalación te pedirá seleccionar el directorio de instalación (Select Destination Location). Por defecto, aparece C:/wamp. Lo podemos dejar ahí. Aceptamos y esperamos a que acabe la instalación.

Cuando acaba de instalarse, nos pide seleccionar un navegador. Por defecto, IExplore, de Microsoft. En mi caso, yo uso y recomiendo, sin lugar a dudas, Chrome, así que cambio a éste.

El Firewall de Windows nos dirá que ha bloqueado algunas características. Tenemos que decirle que permita el acceso.

A continuación, nos pedirá configurar el correo SMTP. Como no tenemos instalado ninguno, lo dejamos como está y continuamos.

El asistente finaliza y arranca WampServer. Para saber que todo ha ido bien, podemos ver el nuevo icono en la barra inferior a la derecha, que aparece inicialmente en rojo y se acaba poniendo en verde. Cuando se pone en verde, WampServer ha arrancado y está ejecutándose sin problemas:

Ahora, si escribimos en la barra de direcciones del navegador «localhost«, nos aparecerá la página de bienvenida de WampServer.

¿Por dónde empiezo?

Vamos a hacer un «Hola Mundo» de la forma más básica posible y sin cambiar nada en la configuración de Apache ni de PHP. Más adelante, en próximos tutoriales, os enseñaré cómo configurar el entorno para que quede todo más organizado.

Lo primero, vamos a crear el directorio de proyecto. La carpeta a la que Wamp puede acceder para visualizar las webs en el navegador se ubican en un directorio que se conoce con el nombre de «DocumentRoot«. Por defecto, está en «c:/wamp/www«. Accedemos a este directorio y dentro creamos el directorio de proyecto, «holaMundo». Dentro, crearemos un nuevo archivo de texto y lo llamaremos index.php. Es muy importante cambiarle la extensión, por defecto .txt, a .php, para que Wamp lo pueda interpretar. Si no sabemos cómo crear este archivo, podemos copiar el index.php de «c:/wamp/www» dentro de «c:/wamp/www/holaMundo». Luego lo editaremos.

Después, tenemos que crear un «alias» en Apache para nuestro nuevo sitio, al que llamaremos «holaMundo». Para ello, pinchamos en el icono verde de WampServer, elegimos «Apache -> Alias directories -> Add an alias»

Nos abrirá una consola de comandos que nos pedirá, primero, el nombre del alias. Escribimos «holaMundo».

Después, la misma consola nos pedirá el destino. Escribimos «C:/wamp/www/holaMundo», que es el directorio creado anteriormente.

Nos aparecerá un mensaje diciendo «Alias created. Press enter to exit«. Esto quiere decir que se ha creado correctamente el alias, así que pulsamos la tecla «Exit» para salir:

También veremos cómo el icono de Wamp ha cambiado de color a amarillo, para, finalmente, volver a ponerse verde. Esto sucede porque el servidor se reinicia al crear un alias.

Si ahora volvemos a acceder a localhost desde el navegador, veremos cómo aparece el nuevo alias creado en la parte inferior:

Ahora, editamos el archivo index.php ubicado en «c:/wamp/www/holaMundo». Podemos abrir cualquier bloc de notas para ello. Yo recomiendo Notepad++ o SublimeText.

En él, vamos a escribir el siguiente código:

<?php
echo "Hola Mundo";
?>

Si ahora, desde la página de localhost que tenemos abierta pinchamos en el alias «holaMundo», veremos cómo el navegador nos muestra las palabras «Hola Mundo». Vemos que la barra de direcciones ahora nos pondrá: http://localhost/holaMundo/.

¡Ahora prueba tú a cambiar la frase «Hola Mundo» por lo que quieras poner!