Servidor WEB y FTP

Escrito por: Martínez Saucedo Alan Alejandro, Cruz Katie, Ceballos Terrones Montserrat

¿Qué es XAMPP?

XAMPP es el entorno más popular de desarrollo con PHP. XAMPP es una distribución de Apache completamente gratuita y fácil de instalar que contiene MySQL, PHP y Perl. El paquete de instalación de XAMPP ha sido diseñado para ser increíblemente fácil de instalar y usar. XAMPP es una forma fácil de instalar y utilizar la distribución Apache que contiene MySQL, PHP y Perl. Es realmente simple de instalar y usar, pero hay que tener en cuenta su proceso de instalación.

XAMPP es un servidor, para desarrollar aplicaciones en php, con conexión a base de datos sql (LAMPP= Linux + Apache + MySQL + PHP + Perl). Facilita la instalación de un servidor web Apache a gente que no tenga muchos conocimientos técnicos y configurar MySQL, PHP y Perl.

Manual de usuario XAMPP

 

Pasos de instalación del programa XAMPP:

Paso 1.- Primero es necesario comprobar si este servidor de páginas está instalado en el sistema. Simplemente debemos abrir el navegador y escribir la dirección http://localhost, con esto podremos observar si hay un servidor instalado, esto ocurrirá si se obtiene un mensaje de error en la página mostrada en el navegador.

Paso 2.- Descargar e instalar XAMPP, podremos encontrar diferentes sitios para su descarga, tenemos que elegir el más confiable y seguro. Después, debemos buscar el archivo descargado e instalarlo como administrador.

Ilustración 2 Página de descarga de XAMPP

Paso 3.- Seguir los pasos de instalación, aquí debemos seleccionar la carpeta en donde se guardarán los archivos del programa y en donde podremos guardar los archivos que subiremos al host.

Paso 4.- En el proceso de instalación, debemos seleccionar los componentes que se instalarán junto con el programa. Los componentes mínimos que instala XAMPP son el servidor Apache y el MySQL, pero XAMPP también instala otros elementos. En la pantalla de selección de componentes puede elegirse la instalación o no de estos componentes. Pero instalar Apache, MySQL y phpMyAdmin como poco para un entorno de pruebas. Si quieres usar Perl también lo puedes instalar. Si usas Java debes instalar el Tomcat.

Ilustración 3 Contenido instalable para XAMPP

Paso 5.- Una vez instalado debemos comprobar que éste funcione. Para eso debemos ir al panel de control de XAMPP. Aquí podremos ejecutar los servicios que necesitemos.

Ilustración 4 Ventana de carga de XAMPP

Ilustración 5 Componentes del menú de XAMPP

Ilustración 6 XAMPP funcionando

 

 

Pasos para configurar XAMPP

Si queremos que nuestra página se pueda visualizar en otro equipo de cómputo, lo que haremos será configurar XAMPP de la siguiente forma:

Paso 1.- Al abrir el programa lo que haremos será presionar el botón “Config” perteneciente al apartado Apache.

Ilustración 7 Paso 1 presionar config

En seguida se abrirá una ventana, en la cual se encontrarán los dos archivos necesarios que se modificarán. En este caso debemos presionar en la primera opción (httpd.config). Se abrirá una ventana con el código escrito en el archivo, por defecto se abrirá en el bloc de notas.

Ilustración 8 Presionar en la primera opción

Paso 2.- Dentro del archivo buscaremos la línea de código que contenga “Listen 81” (puede tener un diferente puerto). Lo que haremos será modificarlo y cambiarlo a 8080, de esta forma: “Listen 8080”. Si el puerto ya tiene este valor, entonces no lo modificamos.

Ilustración 9 Paso 2 Abrir archivo en bloc de notas

Paso 3.- En seguida debemos cerrar el bloc de notas, nos dirigimos de nuevo al menú de XAMPP y vamos de nuevo al botón “Config”. Ahora presionaremos en la segunda opción (http-ssl.config). De la misma forma, se abrirá un archivo en el bloc de notas con el código que contiene el archivo.

Ilustración 10 Paso 3 Abrir el segundo archivo

Paso 4.- Una vez hemos abierto el archivo buscaremos la línea de código que contenga el siguiente texto: “Listen 443”. En este caso debemos dejarlo en el puerto 443, pero si se encuentra con otro valor lo que haremos será modificarlo. Por lo tanto, tuvimos que haber cambiado los puertos a “Listen 8080” y “Listen 443”.

Ilustración 11 Paso 4 Modificar el valor del puerto

Paso 5.- Para comprobar que nuestros cambios se realizaron lo que haremos será presionar el botón “config” que se encuentra en la parte superior derecha del menú. En seguida se abrirá una ventana en donde presionaremos la opción “Service and Port Settings”. Se abrirá una ventana la cual nos mostrará los valores de los puertos que hemos modificado. También podemos modificarlos en caso de que no contengan los puertos escritos anteriormente. Una vez hemos revisado los puertos debemos presionar el botón “save”, lo mismo haremos para cerrar la ventana anterior.

Ilustración 12 Paso 5 Comprobación de configuración

Paso 6.- Una vez hemos configurado los puertos, debemos iniciar el servidor. Para eso simplemente debemos presionar el botón “Start” perteneciente al servidor Apache. En la columna “Puertos” podremos ver los puertos que hemos modificado, así nos daremos cuenta con qué puertos estamos trabajando.

 

Ilustración 13 Paso 6 Activación de servidor

Paso 7.- Para asegurarnos de que el servidor está funcionando, debemos presionar el botón “Admin” en seguida del botón “Start”. Se abrirá una ventana en el navegador con la página de XAMPP. En caso de no visualizar la página, entonces debemos modificar los puertos, pues el servidor no estará funcionando. Una vez tenemos el servidor en función podremos agregar nuestra página HTML Para visualizarla en el navegador.

Ilustración 14 Paso 7 Comprobación de funcionamiento

Pasos para subir un archivo HTML

Paso 1.- Nos debemos dirigir a la carpeta que creamos para guardar XAMPP, aquí podremos encontrar todas las carpetas con las que cuenta el programa.

Ilustración 15 Carpeta XAMPP

Paso 2.- Ahora lo que nos interesa es la carpeta “htdocs” que en si contiene los archivos que se mostrarán en el servidor local. Para agregar la página debemos abrir esta carpeta.

Ilustración 16 Carpeta htdocs

 

Paso 3.- Ahora, debemos crear el archivo HTML utilizando el bloc de notas, puede ser una página simple de prueba, en la cual pondremos los datos que se mostrarán al abrir el navegador. Para guardarlo le pondremos el nombre de “index2.html”.

Ilustración 17 Creación de documento HTML

 

Paso 4.- Una vez que el archivo HTML ha sido creado, debemos mover el documento que se creó a la carpeta “htdocs”, la cual encontraremos en la carpeta local del programa.

Ilustración 18 Colocar documento HTML a XAMPP

Paso 5.- Ahora revisaremos su funcionamiento, abrimos el panel de control de XAMPP, e inicializamos solo Apache. Ahora podemos presionar el botón “Admin” o abrir nuestro navegador y teclear: http://localhost. Ahora, al poner a un archivo html o php, como “index”, le estas indicando al servidor que es el archivo de raíz, el cual debe abrirse automáticamente. Solo puede haber un archivo index por carpeta, tener más provocaría errores.

Ilustración 19 Página en la web

Ilustración 20 Dirección de localhost

Paso 6.- Una vez hemos revisado que funciona de manera correcta, lo que haremos será revisar la página en otra computadora. Antes de eso debemos asegurarnos de que el otro equipo se encuentre conectado a la misma red que la computadora que funciona como servidor. Para abrir la página en otro equipo debemos escribir la siguiente dirección en la barra URL: 192.168.254.18:8080/index2.html. Donde el IP pertenece a la IP de la computadora (la cual funciona como servidor), después se coloca el puerto que hemos puesto en la configuración (:8080), al final colocamos el nombre del archivo HTML que hemos guardado.

Ilustración 21 Dirección desde otro equipo

De esta forma podremos visualizar la página HTML que hemos creado y colocado en el servidor creado por XAMPP. Ahora podremos modificar el archivo desde el servidor local, mientras que los otros equipos conectados a la misma red

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s