ceu-notes/2/IAW/assignments/t1-ej2-xampp/t1-ej2-xampp.tex

\documentclass[12pt,a4paper,titlepage]{article}
\usepackage[spanish]{babel}
\usepackage{hyperref}
\usepackage{graphicx}
\usepackage{subcaption}

\title{\includegraphics[width=0.75\linewidth]{imgs/xampp-logo.png}}
\author{Nicolás A. Ortega Froysa}

\begin{document}
\maketitle

\tableofcontents
\pagebreak

\section{Introducción}

La herramienta XAMPP es un conjunto de programas (Apache, MariaDB, PHP, y Perl)
que sirven para montar fácilmente un servidor web. Se han elegido estos
programas ya que suelen ser los más usados en páginas y aplicaciones web. Esto
hace que montar un servidor web sea mucho más fácil, especialmente en sistemas
como Microsoft Windows.

El objetivo de este documento será documentar cómo instalar y configurar XAMPP
en una máquina Windows, y modificar el contenido que provee el servidor.

\section{Instalación}
\begin{figure}[!htb]
	\centering
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/download.png}
		\caption{Descarga de XAMPP.}
		\label{fig:download}
	\end{subfigure}
	\hfill
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/01-xampp-installation.png}
		\caption{Instalación de XAMPP.}
		\label{fig:xampp-installation}
	\end{subfigure}
	\caption{Instalación de XAMPP.}
\end{figure}

En primer lugar queremos descargar el instalador de XAMPP, que se descarga desde
<<Apache Friends>>.\footnotemark{} Están disponibles varias versiones para
descargar, de acuerdo a la versión de PHP que queremos usar. En nuestro caso
simplemente elegiremos la versión más actual disponible que sería la v8.1.6
(figura \ref{fig:download}). Lo único que hay que asegurarse es que se instale
en {\tt C:\textbackslash{}xampp}.

\footnotetext{https://www.apachefriends.org/download.html}

Al finalizar la descarga se ejecuta el instalador. Hay algunas opciones de
instalación que nos piden, pero sólo hace falta la instalación por defecto que
viene con Apache2 y MySQL/MariaDB.

\section{Uso y Configuración}

\begin{figure}[!htb]
	\centering
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/03-xampp-control-panel.png}
		\caption{Panel de control de XAMPP.}
		\label{fig:xampp-control-panel}
	\end{subfigure}
	\hfill
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/04-apache-mysql-enabled.png}
		\caption{Habilitación de Apache y MySQL.}
		\label{fig:apache-mysql-enabled}
	\end{subfigure}
	\hfill
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/05-home-page.png}
		\caption{Página inicial de XAMPP.}
		\label{fig:home-page}
	\end{subfigure}
	\caption{Configuración de XAMPP.}
\end{figure}

Cuando hayamos terminado de instalar XAMPP, podemos ejecutarlo buscándolo en el
menú. Es aconsejable ejecutarlo como administrador, ya que se requerirá de
permisos administrativos para poder iniciar los servicios para poder escuchar en
los puertos del ordenador.

Al abrir XAMPP veremos el panel de control (figura
\ref{fig:xampp-control-panel}). Desde aquí podremos acceder a toda la
administración de nuestro servidor. Esto incluye configuración, control, y
acceso a los {\it logs} de servicio. Aquí nos interesa encender los servicios de
Apache y MySQL, dándole a los botones de <<Start>> (figura
\ref{fig:apache-mysql-enabled}). Si no se ha ejecutado como administrador, aquí
pedirá permiso para usar los puertos. Cuando ya se hayan inicializado los
servicios, podemos abrir el navegador e introducir {\tt http://localhost} en la
barra de navegación y nos encontraremos con la página de inicio de XAMPP (figura
\ref{fig:home-page}).

\section{Modificación de Contenidos}

\begin{figure}[!htb]
	\centering
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/06-index-file.png}
		\caption{Archivo índice.}
		\label{fig:index-file}
	\end{subfigure}
	\hfill
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/07-edit-index.png}
		\caption{Modificación del archivo índice.}
		\label{fig:edit-index}
	\end{subfigure}
	\hfill
	\begin{subfigure}[tb]{0.45\textwidth}
		\includegraphics[width=0.95\linewidth]{imgs/08-display-index.png}
		\caption{Visualización de página índice modificada.}
		\label{fig:display-index}
	\end{subfigure}
	\caption{Modificación de recursos XAMPP.}
\end{figure}

Para poder modificar la página principal (índice), podemos encontrar el archivo
en {\tt C:\textbackslash{}xampp\textbackslash{}htdocs\textbackslash{}index.php}
(figura \ref{fig:index-file}). En este documento encontraremos un pequeño {\it
script} en PHP que redirecciona al {\tt dashboard}. Borramos todo este contenido
y lo reemplazamos con el contenido HTML/PHP que queremos (en nuestro caso
<<Hello, world!>>) (figura \ref{fig:edit-index}). Al hacer esto, si volvemos al
navegador y refrescamos la página (sin caché) veremos el texto que hemos escrito
(figura \ref{fig:display-index}).

\section{Conclusión}

XAMPP es una herramienta bastante fácil de usar para montar servidores web. Es
verdad que no sería muy útil en un entorno no-gráfico (como suelen ser la
mayoría de los servidores), pero para los que están empezando con desarrollo y
administración web les facilitará bastante la tarea.

\pagebreak

\section{Derechos de Autor y Licencia}

\noindent
Copyright \copyright\ \the\year\ Nicolás A. Ortega Froysa
<nicolas@ortegas.org> \\
\\
Este documento se distribuye bajo los términos y condiciones de la licencia
Creative Commons Attribution No Derivatives 4.0 International.

\end{document}