Primeros pasos con WampServer

¿Qué es?

WampServer

By AlterwayDuncan9384 at fr.wikipedia

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).

Descargar WampServer

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

Download WAMP

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:

Wamp listo

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»

Añadir alias

Añadir 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:

alias-creado

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:

Your aliases

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!

diegorys

Ingeniero en Informática, apasionado de la robótica, con alma de investigador en nuevas tecnologías, analista programador y profesional del desarrollo ágil en entornos web y smartphones, con amplios conocimientos y experiencia desde antes de 2008 en entornos WAMP/LAMP, experimentando con Arduino desde 2012 y con Raspberry Pi desde 2014.

Share

3 comentarios en “Primeros pasos con WampServer

  1. silverio

    Gracias por la enseñanza brindada, soy nuevo en esto de la programacion, pero debo mencionar que me agrada y me llama la atencion y el aporte que hiciste me sirvio mucho al hacer la instalacion de wamserver y el famoso hola mundo, me resulto facil gracias a las indicaciones que segui, ojala y tengas mas enseñanzas que compartir como la realizacion de formularios, gracias

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.