La Tienda Online de tu Salón (1.ii): Configuración del Servidor Local

Hoy vamos a dejar la teoría un poco de lado y vamos a dedicarnos a instalar el programa que convierte nuestro ordenador en un servidor, de modo que podamos desarrollar nuestra página en local e ir viendo cómo quedaría si la subiésemos a internet (a un hosting). Si no habéis leído las dos entradas anteriores, os sugiero que lo hagáis ahora, antes de continuar (tenéis los enlaces al final de esta entrada).

Lo primero que vamos a hacer es descargar el programa servidor que usaremos durante todo nuestro curso online: XAMPP. Para ello haz clic en este enlace y descárgate fichero de instalación: XAMPP Windows (tardará un ratito, pero nos irá mostrando el progreso en la parte de abajo a la izquierda). El enlace que os he puesto es para un sistema operativo Windows, porque me imagino que será el que uséis casi todos vosotros, pero también se puede usar en un Mac o un ordenador con Linux. Para este tutorial usaré un ordenador con Windows 7, por lo que si usáis otro sistema operativo las imágenes que yo pongo podrían variar ligeramente con lo que vosotros veréis.

Progreso de la descarga

Una vez descargado el fichero, lo abriremos y comenzará la instalación automáticamente. Para abrirlo pulsaremos en el botón de la flecha que está en la derecha de la ventanita del progreso de la descarga y luego en "Abrir" (ambos clics con el botón izquierdo del ratón), tal y como os muestro en esta imagen:

Es probable que nos aparezca la siguiente ventana, en ese caso simplemente daremos a "Ejecutar":

También es posible que a continuación nos pregunte lo siguiente:

Esto nos está indicando que tenemos un antivirus ejecutándose, y nos informa de que es posible que ralentice el proceso. Lo ideal es detener el antivirus y darle después a "Yes". Si no sabemos detenerlo, le daremos directamente a Yes y tampoco debería haber complicaciones. No obstante, si a alguien le da algún problema este punto, puede preguntarnos con un comentario en esta entrada del blog y le ayudamos a resolver su caso particular.

La siguiente pantalla es únicamente para darnos la bienvenida al programa de instalación. Pulsamos "Next" para continuar.

Ahora nos aparece una pantalla donde podemos seleccionar qué componentes queremos instalar. Nos aseguramos que todas las casillas están activadas (con la marca puesta) y hacemos clic en el botón "Next".

Ahora nos pedirá que le indiquemos el directorio (carpeta) en el que queremos instalar el programa. Es posible que el programa os sugiera que lo instaléis dentro de "Archivos de Programa", pero yo NO os lo recomiendo. La experiencia me dice que da muchos menos problemas instalarlo directamente en la raíz de nuestro disco duro. Para ello simplemente cambiaremos la ruta que nos propone el programa de instalación por defecto y dejaremos "C:\xampp" (tal y como muestra la imagen). Pinchamos de nuevo en "Next".

La barra invertida "\" se obtiene pulsando la tecla "Alt Gr", a la derecha de la barra espaciadora, y sin soltarla pulsando también la tecla que está a la izquierda del número 1, que tiene los caracteres "º" y "ª"

La siguiente pantalla que nos sale es un poco de publicidad, en la que nos indican que podemos preinstalar muchas aplicaciones. Como en nuestro tutorial vamos a hacer toda la instalación nosotros mismos, para entender mejor todo el proceso, os recomiendo que simplemente desmarquéis la casilla y pulséis "Next" de nuevo.

Llegamos ya a la última pantalla que nos indica que está todo listo, por lo que nos limitaremos a pulsar otra vez en "Next" y el programa de instalación comenzará a instalar todos los componentes.

Ahora simplemente esperaremos un ratito a que la barra de progreso llegue al final, lo cual indicará que ya se ha instalado completamente nuestro programa servidor (leer entrada de la semana anterior para más información sobre qué es un programa servidor).

En esta última ventana dejamos marcada la casilla que nos aparece, para que se abra directamente el panel de control del programa servidor (XAMPP) y pulsamos en "Finish". Automáticamente nos aparecerá la siguiente ventana en pantalla:

Veréis que os he marcado dos zonas en amarillo. Miraremos que en el cuadrado amarillo no aparezca ningún mensaje de error. Si lo hubiese aparecería en rojo, por lo que si todos los mensajes están en azul o negro, es que el programa está funcionando correctamente. También comprobad que os aparezca el texto "Control Panel Ready", que indica que el programa servidor está listo para ser usado.

Vamos a ver si funciona. Para ello haremos clic en este enlace "http://localhost" y se nos abrirá automáticamente una nueva ventana de nuestro navegador. Veréis que os aparece un error que será diferente para cada uno de vosotros, dependiendo del navegador que uséis. En mi caso que uso Google Chrome es el siguiente:

Esto es debido a que hemos instalado el servidor, pero no lo hemos puesto a funcionar aún. Cuando en el navegador vamos a "localhost", estamos indicándole que nos muestre lo que estamos desarrollando en local. Si recordáis la entrada de la semana pasada, explicamos que el servidor era el encargado de preparar lo que el navegador va a mostrar, y en este caso, como no estamos ejecutando aún el servidor, no hay nada que el navegador pueda mostrar, por eso nos muestra ese mensaje de error.

Por lo tanto, vamos a iniciar nuestro servidor y volveremos a cargar la página localhost. Para ello iremos al panel de control del servidor y pulsaremos en el botón "Start" al lado derecho de donde dice "Apache".

Una vez pulsamos vemos que se producen varios cambios en la ventana, para indicarnos que el servidor ya sí que está funcionando. Nos fijaremos especialmente en dos de esos cambios: el botón de "Start" se ha cambiado por uno de "Stop", y en los mensajes de abajo ha aparecido, entre otros, uno que dice "Status change detected: running".

Si ahora volvemos a hacer clic en el enlace a nuestro desarrollo local ("http://localhost"), veremos que la ventana que nos aparece es bien distinta, ya que en vez del error nos aparece un mensaje de XAMPP, que nos indica que todo se ha instalado y se está ejecutando a la perfección.

Si pulsamos en el enlace que dice "Español", entraremos en la pantalla de bienvenida de nuestro programa servidor, donde podremos ver varias utilidades y configuraciones, pero de momento no es necesario tocar nada ahí para poder seguir nuestro tutorial.

He intentado que todos los pasos de la instalación vayan perfectamente explicados, para que os resulte extremadamente sencillo seguir este curso online, pero si en algún punto os quedáis atascados (lo cual nos sucede a todos en algún momento cuando tratamos con informática), por favor, escribid un comentario en esta entrada del blog y os ayudaremos. Insisto en que no os dejéis desanimar si algo del tutorial no os sale a la primera, pues es nuestra intención ayudaros a superar todos esos puntos conflictivos y así conseguir que todos y cada uno de vosotros lleguéis al final del tutorial con vuestra tienda online funcionando.

La semana que viene descargaremos e instalaremos Prestashop en nuestro programa servidor, ¿tenéis ya curiosidad por ver cómo se hace?

¡Hasta la semana que viene!

Entradas anteriores:

1. Nivel Básico
1. ¿Hosting o Local?