EJERCICIO1_Instalación Localhost

Lo primero de todo nos dirigimos a la página oficial de prestashop y descargamos la versión actual del programa. Rellenamos nuestro perfil para poder descargarlo.

Una vez descargado vamos a descomprimir los archivos de nuestra carpeta descargas

Hecho este paso vamos a necesitar un servidor local para poder tener nuestro localhost. En este curso vamos a trabajar con el servidor Xampp ya que es un servidor muy versátil y podemos trabajar con él en cualquier sistema operativo. Aunque también existen otros dos servidores con los que se trabajar que son el Mamp (Mac) o el Wamp (Windows).

Abrimos la página oficial de Xampp y descargamos nuestro programa para nuestro sistema operativo:

¿Qué es XAMPP?

XAMPP es un software que contiene diferentes softwares que habilitarán tu ordenador para soportar estas dos tecnologías. Además, esta herramienta incluye un software llamado Apache, que será el que interprete el lenguaje PHP de PrestaShop y lo procese.

Una vez descargado iniciamos el asistente de instalador. Solo tenemos que ir siguiendo los pasos que nos indican las pestañas que se ven a continuación:

Paso 1:
Una vez descargado el paquete, puedes ejecutar el archivo .exe haciendo doble clic en él.

Paso 2:
Se recomienda desactivar el programa antivirus hasta que todos los componentes estén instalados, ya que puede obstaculizar el proceso de instalación.

Paso 3: Desactivar el UAC
También el control de cuentas de usuario (User Account Control, UAC) puede interferir en la instalación, ya que limita los derechos de escritura en la unidad de disco C:\.

Para abrir UAC, desliza rápidamente el dedo desde el borde derecho de la pantalla y pulsa en Buscar. (Si utiliza mouse, señale la esquina superior derecha de la pantalla, mueva el puntero hacia abajo y, a continuación, haga clic en Buscar). Escribe uac en el cuadro de búsqueda y luego pulsa o haz clic en Cambiar la configuración del Control de Cuentas de Usuario

Paso 4: Iniciar el asistente de instalación
Una vez superados estos pasos, aparece la pantalla de inicio del asistente para instalar XAMPP.
Para ajustar las configuraciones de la instalación se hace clic en “Next”.

Paso 6: Los componentes del software
En la rúbrica “Select components” se pueden excluir de la instalación componentes aislados del paquete de software de XAMPP. Se recomienda la configuración estándar para un servidor de prueba local, con la cual se instalan todos los componentes disponibles. Confirma la selección haciendo clic en “Next”

Paso 7: Directorio para la instalación
En este paso se escoge el directorio donde se instalará el paquete. Escogemos la configuración estándar.
De esta manera se creará una carpeta con el nombre XAMPP en C:\.

Paso 8: Iniciar el proceso de instalación
El asistente extrae los componentes seleccionados y los guarda en el directorio escogido en un proceso que puede durar algunos minutos. El avance de la instalación se muestra como una barra de carga de color verde.

Paso 9: Configurar Firewall
Durante el proceso de instalación es frecuente que el asistente avise del bloqueo de Firewall. En la ventana de diálogo puedes marcar las casillas correspondientes para permitir la comunicación del servidor Apache en una red privada o en una red de trabajo. Recuerda que no se recomienda usarlo en una red pública.

Paso 10: Cerrar la instalación
Una vez extraídos e instalados todos los componentes puedes cerrar el asistente con la tecla “Finish”. Para acceder inmediatamente al panel de control solo es necesario marcar la casilla que pregunta si deseamos hacerlo.

XAMPP es una distribución de Apache que incluye varios software libres.

Apache: el servidor web de código abierto es la aplicación más usada.

MySQL/MariaDB: conMySQL, XAMPP cuenta con uno de los sistemas relacionales de gestión de bases de datos más populares del mundo. En combinación con el servidor web Apache y el lenguaje PHP, MySQL sirve para el almacenamiento de datos para servicios web. En las versiones actuales de XAMPP esta base de datos se ha sustituido por MariaDB, una ramificación (“Fork”) del proyecto MySQL.

PHP: es un lenguaje de programación de código de lado del servidor que permite crear páginas web o aplicaciones dinámicas. Es independiente de plataforma y soporta varios sistemas de bases de datos.

Perl: este lenguaje de programación se usa en la administración del sistema
Además de estos componentes principales, esta distribución gratuita también incluye, según el sistema operativo, otras herramientas como el servidor de correo Mercury, el programa de administración de bases de datos phpMyAdmin, el software de analítica web Webalizer, OpenSSL, Apache Tomcat y los servidores FTP FileZilla o ProFTPd.

En la interfaz de usuario del panel de control se protocolan todas las acciones y es posible activar o desactivar los módulos por separado con un simple clic. Disponemos de diversas utilidades como:

Config: para configurar XAMPP así como otros componentes aislados.
Netstat: muestra todos los procesos en funcionamiento en el ordenador local
Shell: lanza una ventana de comandos UNIX
Explorer: abre la carpeta XAMPP en el explorador de Windows
Services: muestra todos los servicios en funcionamiento
Help: incluye enlaces a foros de usuarios
Quit: se usar para salir del panel de control

Iniciar módulos

En la parte superior se pueden iniciar o interrumpir los módulos de XAMPP por separado mediante los comandos “Start” y “Stop” bajo “Actions”. Los módulos que se activaron aparecen marcados en verde.

Si uno de ellos no pudiera ser iniciado por un error, se mostrará marcado en rojo. Las notificaciones de error protocoladas en la parte de abajo ayudan a encontrar las causas del error.

Ajustar XAMPP
Una causa frecuente de fallos en el uso de Apache es un puerto bloqueado. La configuración estándar XAMPP suele asignar al servidor web el puerto principal 80 y el puerto SSL 443, pero suelen estar bloqueados por otros programas. En la figura anterior se muestra un conflicto con el programa de mensajería instantánea Skype, que está usando los puertos 80 y 443, por lo que el servidor no se puede iniciar. Existen tres posibles soluciones:

1. Cambiar el puerto en Skype:
Para ello se abre Skype y en “Herramientas” > “Opciones” > “Avanzada” > “Conexión” se desmarca la casilla donde se indica “Usar los puertos 80 y 443 para las conexiones entrantes adicionales”.

2.Cambiar las configuraciones de los puertos en Apache:
Haz clic en la configuración del módulo Apache (“Config”) y abre los archivos httpd.conf y httpd-ssl.conf. En httpd.conf cambia el puerto 80 por el puerto que deseas usar y lo mismo se realiza en httpd-ssl.conf con el puerto 443. Guarda los archivos. En la tecla “Config” de la derecha selecciona “Ajustar puertos” para poder introducir los cambios realizados en los archivos conf.

3. Finalizar Skype:
El método más sencillo de evitar conflictos con Skype consiste en cerrarlo y volver a iniciarlo solo cuando el servidor Apache ya esté en funcionamiento.

Nos vamos a donde tenemos instalado nuestro Xampp y dentro de esta carpeta nos metemos en htdocs aquí alojamos el fichero de prestashop que creamos dentro de htdocs. Descomprimimos el fichero de prestashop que hemos descargado y lo metemos dentro de nuestra carpeta.

Entramos en la carpeta donde tengamos instalado XAMPP, normalmente será c:/xampp si no has modificado en la instalación, y entramos en la carpeta /htdocs, una vez dentro creamos una carpeta donde vamos a tener nuestro Prestashop.

Una vez descomprimido todos los archivos vamos a iniciar el Xampp e iniciamos la carpeta phpmyadmin para crear nuestra base de datos para poder instalar nuestro prestashop porque sin base de datos no podremos iniciar el programa.

Para los próximos pasos debemos tener arrancado nuestro servidor XAMPP. Para arrancarlo debemos abrir el panel de control de XAMPP y darle al botón «Start» de Apache y MySQL. Con esto hemos puesto en marcha el servidor web y el servidor de base de datos MySQL.

Una vez arrancados los servicios el panel de control de XAMPP tendréis algo como esto. Se habrán activado los botones correspondientes de Stop (parar el servicio) y el de administrar el servicio, admin.

A continuación, crearemos una base de datos donde se guardará la información de nuestra tienda, es importante realizar este paso antes de intentar instalar el PrestaShop.

Para hacerlo damos clic en el botón «Admin» que está en la línea de MySQL (dentro de XAMPP). Posteriormente, se abrirá una ventana en nuestro navegador web predeterminado con una aplicación llamada PHPMyAdmin, muy útil para administrar nuestras bases de datos MySQL.

Si en algún momento necesitas ingresar a este administrador de base de datos puedes hacerlo directamente en el navegador web insertando la siguiente URL: http://localhost/phpmyadmin

Una vez dentro tenemos que crear una base de datos, para esto vamos al menú que hay a la izquierda y pulsamos sobre «Nueva».

Ahora nos pregunta el nombre de la base de datos y la codificación. Vamos a llamarla como «Ej1» y elegimos la codificación «utf8_spanish_ci» (es el idioma que quieres utilizar), después de rellenar estos datos le damos a «crear»

Posteriormente, se habilitará un formulario en la pestaña de «Base de datos» y debes agregar el nombre de la nueva base de datos sin espacios ni caracteres especiales como tildes, «ñ» ni ningún otro símbolo de puntuación.

Le ponemos el nombre de programador_prestashop a tu base de datos.

Una vez creada, la base de datos se podrá visualizar en el listado de la izquierda donde se encuentran todas las demás. En este momento, no hemos creado ninguna tabla ni lo haremos en el futuro, dado que en la instalación de PrestaShop, éste se encargará de crearlas automáticamente.

Configuración PHP
Volvemos al control panel de XAMPP y damos clic en el botón «Config» y luego en la opción «PHP (php.ini)», esto abrirá un bloc de notas con la configuración de PHP que debemos cambiar.

Busca en el archivo la palabra «intl» y asegúrate de quitarle el símbolo de punto y coma «;» que está al inicio de la línea como se ve en la imagen.

También busca la expresión «realpath_cache_size» y cambia su valor a «5M» y borra el punto y coma «;» que está al inicio de la línea, tal como se ve en la imagen.

Recuerda guardar los cambios, luego de esto regresa al XAMPP Control Panel y da clic en el botón «Stop» de la línea del Apache y posteriormente clic nuevamente en «Start»

Nota: si en este proceso modificaste o agregaste algo de forma errónea en este archivo, al dar clic en el botón de «Start» te generará un error y no podrás iniciar el servicio, asegúrate de que todo haya quedado correctamente.

Instalar el CMS PrestaShop
Como ya se ha agregado la carpeta PrestaShop en la raíz del apache, «programador_prestashop» ubicada en «C:\xampp\htdocs\», entonces podras acceder directamente a ella a través del navegador.

El Apache es el intérprete de PrestaShop, lo cual lo convierte en el Servidor Web, por otro lado, también la ruta C:\xampp\htdocs es la raíz del Apache.

Por lo tanto, cuando acceda al navegador web, se ejecutará el servidor web y todo lo que haya dentro de la carpeta raíz.

En los últimos pasos, abrimos el navegador web para ejecutar el software que nos permite administrar bases de datos y en su URL tiene la palabra «localhost», pues bien, el localhost es la ruta web para acceder a nuestro servidor web local que funciona gracias a Apache.

¿Qué significa localhost?

Localhost significa «host» (anfitrión) y «local» (ordenador actual), por lo tanto, siempre que queramos acceder a la tienda prestashop local, debemos poner esta palabra en el navegador seguido del nombre de la carpeta donde queremos instalar PrestaShop.

Abriremos la ruta «http://localhost/programador_prestashop» que es la ruta de nuestra tienda y aparecerá el paso a paso de la instalación como se observa en la siguiente imagen:

En el siguiente paso aceptamos los términos de licencia de uso de PrestaShop.

En este paso, el instalador de PrestaShop realizará una evaluación del sistema para ver que se cumplan con ciertos requisitos para que éste funcione correctamente.

Esta sería la pantalla que se mostraría de no tener configurado correctamente el archivo php.ini.

Por lo que revisaremos bien que estén bien escritas las modificaciones en el código.

Nota: Si eres usuario Mac o Linux, tal vez debas realizar una configuración de permisos para que tu sistema le permita al Apache realizar cambios en la carpeta del PrestaShop.

Teniendo correctamente configurado el PHP podemos observar la pantalla que se muestra en la imagen.

A continuación, aparecerá un formulario para que ingreses los datos básicos de la tienda como su nombre y datos de acceso.

Como es una tienda local y solo tú tendrás acceso a ella, puedes agregar una contraseña sencilla para que la recuerdes fácilmente. Sin embargo, te recomiendo que no te acostumbres a usar contraseñas fáciles en ambientes de producción.

En el siguiente paso, el instalador nos preguntará sobre los datos de conexión a la base de datos. Recuerda que en este ejemplo he creado una base de datos llamada «programador_prestashop», asegúrate de poner el mismo nombre de la base de datos que creaste desde el PHPMyAdmin

En los datos de conexión agrega «127.0.0.1», aunque este dato ya viene predefinido en el formulario; también puedes cambiarlo por «localhost» que es nuestro acceso al servidor local.

Nota aclaratoria:
«127.0.0.1» es la dirección IP de «localhost».

Luego agrega el nombre de la base de datos.

El usuario que tiene acceso a la base de datos el cual es «root» que significa «administrador», en la instalación de XAMPP no se configura contraseña, por lo tanto, debes dejarla en blanco.
Como prefijo de las tablas puedes dejar «ps_» que es la configuración predeterminada o cambiarla si lo deseas.

Se crea la base de datos para la instalación en local de PrestaShop

En el siguiente paso el instalador empezará a crear la base de datos y a copiar algunos archivos en tu tienda para que pueda funcionar y por último mostrará una confirmación de instalación exitosa.

Por último, solo tendrás que eliminar la carpeta «install» del directorio de tu tienda, también tendrás que renombrar la carpeta «admin» para ingresar al BackOffice.

Si das clic en el botón «Administrar tu tienda» que se encuentra un poco más abajo, podrás acceder automáticamente al BackOffice, ya que el instalador se encargará de renombrar la carpeta «admin»