Preparando el entorno

Alejandro Amat Reina

DWES

Preparando el entorno

NDICE
1.

INSTALANDO EL SISTEMA OPERATIVO

HABILITAR SUDO EN DEBIAN7 .............................................................................................................................. 3

PERMITIR CREAR ENLACES EN EL ESCRITORIO ........................................................................................................... 3
INSTALAR VMWARE TOOLS ................................................................................................................................ 3
2.

INSTALACIN DE XAMPP

3.

INSTALACIN DEL IDE PHPSTORM

INSTALACIN DE JAVA ................................................................................................................................. 7

INSTALAR PHPSTORM ................................................................................................................................. 7
PRIMER PROYECTO CON PHPSTORM............................................................................................................... 8
INTEGRANDO EL EJECUTABLE DE PHP .............................................................................................................. 9
4.

ACTIVIDAD

Alejandro Amat Reina

11

Pgina 1

DWES

Preparando el entorno

1. Instalando el Sistema Operativo

Vamos a trabajar con una mquina virtual Debian 7, y sobre ella instalaremos
todas las herramientas que necesitamos para trabajar durante el curso. El profesor
facilitar al alumno dicha mquina virtual para la aplicacin VMWare, pero sera
conveniente que el alumno instalara y configurara su propio entorno para, por un
lado, enfrentarse a los inconvenientes que pueden surgir durante la instalacin, y
por otro lado, adaptar los componentes instalados a la arquitectura de la mquina
con la que trabajar el alumno.
Los pasos a seguir para instalar el sistema operativo sern los siguientes:
1. Descargaremos

la

imagen

del

sistema

operativo

(https://www.debian.org/distrib/). Elegiremos la imagen que se adece a

nuestra mquina.
2. Crearemos la mquina virtual utilizando la aplicacin VMWare Player que se
puede

descargar

gratuitamente

de

la

web

(https://my.vmware.com/web/vmware/free#desktop_end_user_computing/
vmware_player/6_0). Al crear la mquina configuraremos las siguientes
opciones:
a. Sistema operativo: Debian.
b. Tamao de disco 20 GB.
c. Memoria RAM al menos 2 GB.
Tambin podemos instalar el sistema operativo en una particin de nuestro
disco para tener un mejor rendimiento.
3. La instalacin del sistema operativo ser estndar, indicaremos que la
mquina funcionar como un cliente con escritorio, pero no marcaremos
que ser Servidor Web (ms adelante instalaremos XAMPP).
4. Crearemos un usuario llamado dwes con contrasea dwes, el usuario root
tendr la misma contrasea (por favor, cread ese usuario con esa
contrasea para evitar problemas, no necesitamos privacidad en nuestro
entorno).
Una vez instalado el sistema operativo haremos algunos cambios en la
configuracin.

Alejandro Amat Reina

Pgina 2

DWES

Preparando el entorno

Habilitar sudo en Debian7

Vamos a convertir el usuario dwes en sudoer para poder hacer sudo con l, para

ello seguiremos los siguientes pasos:

1. Abrimos la terminal de root (Aplicaciones Accesorios Terminal de root).
2. Ejecutamos desde el terminal: visudo
3. Se abrir un archivo llamado /etc/sudoers.tmp. Colocamos debajo de root la
siguiente lneas:
root ALL=(ALL) ALL
dwes ALL=(ALL) ALL <- Esta lnea es la que hay que aadir
Con esto ya no tendremos que loguearnos como root cada vez que queramos
hacer algo que requiera de ciertos permisos. La contrasea que nos pedir es la
del usuario dwes, pero como es la misma que le hemos puesto al root no podemos
equivocarnos (OJO! cuidado con los comandos que utilizamos porque podemos
destruir el sistema operativo).
Referencia

de

http://www.linuxnoveles.com/2012/debian-wheezy-despues-de-

instalar/
Permitir crear enlaces en el escritorio
Para poder crear enlaces en el escritorio seguiremos los siguientes pasos:

1. Vamos a aplicaciones herramientas del sistema preferencias

configuracin avanzada.
2. En la categora desktop activamos la opcin have file manager handle the
desktop.
Ahora nos permitir crear enlaces en el escritorio, por ejemplo, arrastrndolos del
men principal. Puedes crear un enlace al navegador para comprobarlo.
Instalar VMWare Tools
El siguiente paso ser instalar las VMWare Tools que nos permitirn copiar y pegar

o arrastrar y soltar archivos, entre el sistema operativo real y nuestra mquina

virtual. Para ello seguiremos los siguientes pasos:
1. Antes de nada necesitamos instalar una serie de aplicaciones que nos
permitirn recompilar nuestro ncleo para la instalacin de las VMWare
Tools. Para ello, ejecutaremos el siguiente comando:
apt-get install gcc make linux-headers-$(uname -r)

2. Cuando haya terminado la instalacin, en el men de VMWare iremos a

Player Manage Install Vmware tools.
Alejandro Amat Reina

Pgina 3

DWES

Preparando el entorno

3. Con esto se descargar una ISO que tendremos que conectar a nuestra
unidad de CD.
4. Una

vez

conectada,

descomprimiremos

el

archivo empaquetado

ejecutaremos el script de instalacin como root (Contestar a todas las

preguntas con la opcin por defecto).
5. Finalmente, reiniciaremos la mquina virtual y comprobaremos que
podemos arrastrar archivos entre la mquina real y la virtual.

Alejandro Amat Reina

Pgina 4

DWES

Preparando el entorno

2. Instalacin de XAMPP
Para poder probar nuestros sitios web, necesitaremos instalar una serie de
herramientas, como son: el servidor web apache, el mdulo php para este servidor,
el SGBD MySql, un front-end para el SGBD (PHPMyAdmin), etc.
Todo esto lo tenemos integrado en un paquete denominado XAMPP cuya
instalacin, que veremos a continuacin, es muy sencilla:
1. Descargamos

el

paquete

XAMPP

para

nuestra

mquina

(https://www.apachefriends.org/es/index.html).
2. Lo descomprimimos en el directorio /opt. Esto crear el directorio
/opt/lampp
3. Una vez hecho esto, ya podemos arrancar los servicios con el siguiente
comando:
/opt/lampp/xampp start
4. Cuando los arrancamos, si abrimos el navegador y nos vamos a la url
http:/localhost nos debera aparecer la pgina de bienvenida de XAMPP.
5. Para parar los servicios podemos hacer esto:
/opt/lampp/xampp stop
En cualquier caso, es mucho ms cmodo trabajar con el panel de control de
XAMPP. Para poder utilizarlo instalaremos la librera python-glade2 necesaria para
ejecutar el panel de control:
sudo apt-get install python-glade2
Ahora, ya podremos ejecutar el panel de control con el siguiente comando:
/opt/lampp/share/xampp-control-panel/xampp-control-panel

Si no estamos como root, tendremos que

hacer sudo. Veremos que se inicia la
aplicacin que nos permite controlar los
servicios de XAMPP. Podemos iniciar o
parar los servicios individualmente o todos
de golpe.
Para mayor comodidad, crearemos un
enlace al panel de control de XAMPP en el
men principal y otro en el escritorio:

Alejandro Amat Reina

Pgina 5

DWES

Preparando el entorno

1. Vamos a aplicaciones herramientas del sistema preferencias men

principal.
2. Vamos a la categora programacin y pulsamos Elemento nuevo.
3. Aadimos un nuevo elemento con los siguientes datos:
Nombre: XAMPP
Comando: gksu /opt/lampp/share/xampp-control-panel/xampp-control-panel
Comentario: Panel de control de XAMPP

4. Si queris cambiar el icono del enlace podis bajaros el logo de XAMPP de

Internet y aadrselo al enlace pulsando en el botn correspondiente al
mostrar las propiedades.
El men principal quedar as:

Despus, bastar con arrastrar el enlace del men principal al escritorio para
tenerlo ms a mano.
Alejandro Amat Reina

Pgina 6

DWES

Preparando el entorno

3. Instalacin del IDE PHPStorm

Crearemos nuestros proyectos utilizando el IDE PHPStorm. Esta herramienta es de
pago, pero para podemos utilizarlo de forma gratuita para proyectos OpenSource y
con fines educativos. En esos casos habr que solicitar la licencia correspondiente
al fabricante del software. Una vez obtenida la licencia educativa por el profesor
ser renovable anualmente y podrn utilizarla todos los alumnos del curso.
Este IDE est programado en Java, por lo que, para poder utilizarlo necesitaremos
instalar el JDK.

Instalacin de Java
Para instalar el jdk utilizando el gestor de paquetes de Debian seguiremos los
siguientes pasos:
1. tenemos que aadir los repositorios donde descargarlos en el fichero

correspondiente. Para ello abrimos una terminal de root y ejecutamos el

siguiente comando:
echo

"deb

http://ppa.launchpad.net/webupd8team/java/ubuntu

precise

main" > /etc/apt/sources.list.d/webupd8team-java.list

2. Presionamos Enter y escribimos lo siguiente en la consola:
echo "deb-src http://ppa.launchpad.net/webupd8team/java/ubuntu precise
main" >> /etc/apt/sources.list.d/webupd8team-java.list

3. Aadimos la llave de seguridad del repositorio escribiendo en la consola:

apt-key adv --keyserver keyserver.ubuntu.com --recv-keys EEA14886

4. Actualizamos las aplicaciones disponibles con el comando:

aptitude update

5. Instalamos

Oracle

Java

escribiendo

en

la

consola:

aptitude install oracle-java8-installer

Despus de estos sencillos pasos ya tendremos java 8 instalado en nuestro Debian.

Para verificar que versin de java tenemos. Escribimos en la consola:
java -version

Instalar PHPStorm
Una vez instalado el JDK de Java, ya podemos instalar el IDE PHPStorm. Para ello,
seguiremos estos pasos:
1. Descargarlo: http://www.jetbrains.com/phpstorm/download/
Alejandro Amat Reina

Pgina 7

DWES

Preparando el entorno

2. Mover el directorio descomprimido al directorio /opt cambindole el nombre

a phpstorm (Ojo! Si cambia la versin cambiarn los nmeros):
mv

PhpStorm-133.982 /opt/phpstorm

3. Para

ejecutar

la

aplicacin

tendremos

que

ejecutar

el

script

/opt/phpstorm/bin/phpstorm.sh
4. Para mayor comodidad crearemos un enlace y lo moveremos al escritorio.
Estando en el directorio /opt, ejecutamos el siguiente comando:
ln s /opt/phpstorm/bin/phpstorm.sh

Despus arrastraremos el enlace al escritorio. Si queremos cambiarle el

icono al enlace, pulsamos botn derecho sobre l, nos vamos a las
propiedades y arrastramos el icono del logo de phpstorm que podemos
encontrar en /opt/phpstorm/bin/webide.png hasta el icono del enlace.
5. Al ejecutar la aplicacin por primera vez nos pedir los datos de licencia.
Introduciremos lo siguiente:
User Name: IES Pere Maria i Orts
Licencia:
688330-25072014
00000SzMzR9R8qoMG41MZtOpPOJgJ1
nLeju8yjHRM7D7lylqw1Ky7igdwnGw
2bfFvfS3stZw8ipOfH2WLMYa4X!5w!

Primer proyecto con PHPStorm

Para empezar a trabajar con PHPStorm vamos a crear nuestro primer proyecto
vaco

siguiendo

los

pasos

que

nos

indican

en

la

siguiente

URL

(http://www.jetbrains.com/phpstorm/webhelp/create-and-run-your-first-phpproject.html)
Tened en cuenta que el proyecto debis crearlo en el directorio /opt/lampp/htdocs
y que necesitamos tener permisos de escritura en este directorio.
Puede ser que lo hayamos instalado como root, mientras que cuando ejecutamos
PHPStorm lo hacemos con el usuario dwes, por lo tanto, el usuario dwes necesita
poder escribir en este directorio.
Para asegurarnos de que tenemos permisos iremos con una ventana de terminal al
directorio /opt/lampp y ejecutaremos el siguiente comando:
ls la htdocs
Alejandro Amat Reina

Pgina 8

DWES

Preparando el entorno

Este comando nos dir quin es el propietario de la carpeta y que permisos tiene.
En el caso de que el propietario sea root ejecutaremos el siguiente comando:
sudo chown -hR dwes htdocs/

Esto cambiar el propietario al usuario dwes, con lo que tendremos permiso de

escritura en este directorio desde PHPStorm.
De momento trabajaremos teniendo los proyectos en la misma carpeta de
despliegue del servidor, por lo que nos ahorraremos tener que subir los archivos
para poder probarlos. Ms adelante utilizaremos una configuracin ms avanzada.

Integrando el ejecutable de PHP

PHPStorm dispone de ayuda inteligente (IntelliJ IDEA). Para que esta ayuda se
corresponda con la versin de php que tenemos en nuestro XAMPP tendremos que
registrar el ejecutable de PHP de XAMPP en nuestro PHPStorm. Para ello
seguiremos los siguientes pasos:
1. Vamos a File Settings
2. En la lista de categoras de la izquierda vamos a PHP.
3. Necesitamos indicar cul es nuestro intrprete. Puesto que la lista est vaca
vamos a configurar uno de la siguiente forma:
a. Hacemos click en el botn de la lista de interpretes
b. Pulsamos el botn + de la esquina superior izquierda para aadir
uno.
c. Le ponemos el nombre PHP de XAMPP
d. Indicamos donde est instalado nuestro XAMPP: /opt/lampp/bin
e. Inmediatamente nos indicar la versin del intrprete que tenemos
instalado

Alejandro Amat Reina

Pgina 9

DWES

Preparando el entorno

f. Pulsamos OK y seleccionamos el nuevo interprete en la lista de

interpretes

g. Ahora nuestro PHPStorm har uso del php de XAMPP y utilizar la

versin de PHP que tenemos instalada cuando nos ofrezca las
ayudas.

Alejandro Amat Reina

Pgina 10

DWES

Preparando el entorno

4. Actividad
Debes preparar tu propio entorno sobre una mquina virtual (o una real) tal y
cmo se ha explicado en los apuntes. Despus, debes crear un proyecto php
utilizando PHPStorm y visualizar la pgina principal a travs de tu servidor XAMPP.
Prctica 1: Prueba de Apache y PHP
El objetivo de esta prctica es aprender el manejo bsico del entorno de desarrollo

PHPStorm, creando una primera pgina PHP que a la vez servir para comprobar la
correcta instalacin de XAMPP.
Para conseguir este objetivo, seguiremos los pasos que se indican a continuacin:
1. Arrancar XAMPP haciendo doble clic sobre el icono que hemos creado en el
escritorio
2. Iniciar el mdulo Apache pulsando el botn Ejecutar situado a la derecha
de su nombre
3. Minimizar el panel de control de XAMPP (ojo!, no pulsar el botn Salir)
4. Ejecutar PHPStorm haciendo doble clic sobre el icono que hemos creado en
el escritorio.
5. Crear un proyecto con File > Create New Project > Empty Project
6. Dar al proyecto el nombre practica1 y situarlo en el directorio
/opt/lampp/htdocs. Con esto se crea un directorio de nombre practica1

debajo de /opt/lampp/htdocs.
7. En la ventana de la izquierda (explorador de proyectos) aparece el proyecto
creado. Dentro de l creamos un nuevo fichero php Pulsando botn derecho
sobre el nombre y seleccionando New > PHP File. Le ponemos de nombre
index.php.

8. En el fichero creado introducimos las siguientes lneas de cdigo:

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Desarrollo web en entorno servidor</title>
<meta name="description" content="PHP, PHPStorm">
<meta name="author" content="Alejandro Amat">
</head>
<body>
<?php
phpinfo();
?>
</body>
Alejandro Amat Reina

Pgina 11

DWES

Preparando el entorno

</html>

9. Cambiamos el autor del documento a nuestro nombre.

10. Abrimos el navegador y tecleamos en la barra de direcciones la url
http://localhost/practica1
11. Aparecer una pgina similar a la de la siguiente imagen

En adelante, utilizaremos esta plantilla de documento para crear nuevos

ficheros php.

Alejandro Amat Reina

Pgina 12