In the last post we installed Ubuntu with Windows 10 in our computer. In eHidra it is important because this is the operating system we use for developing. Now, we are going to explain the next step in this post, which is about preparing a developing environment, with the tools we are going to use every day. Do you want to know more? Keep reading our post!

The server

The first thing we are going to do is to install a server. We will start by Apache, which is the most symple. For that, We open a terminal window and type the following command:

$ sudo apt-get install apache2

When it asks if we accept, we say yes (y) and it will install everything we need.

It installs Apache2 as a service, and automatically starts. We can check it by accessing the local address of our device.
Since Apache listen automatically on port 80, it is not necessary to specify. We just need to write localhost on the address bar of our browser, and it access directly to the website, which will be the server’s website, in this case.


Now we are going yo configure the server at the same time as we see and explain the functioning. The first thing we must know is that Apache configuration is based on the file: /etc/apache/apache2.conf. where the general aspects are set, and it includes the following lines in the end:

# Include generic snippets of statements
IncludeOptional conf-enabled/*.conf
# Include the virtual host configurations:
IncludeOptional sites-enabled/*.conf

This line is to include the settings of all the files included in the subdirectories conf-enabled and sites-enabled. In our case, we won’t add an extra configuration, but we will use the configuration of the sites. The reason for doing this is that, after a while developing, and when our website sets on a server of Internet, it is possible that some resources and access fail, due to the url changes as consequence of the server configuration. So, we will use this feature to configure our different environments.
It will consist of creating a domain for each project we have, so that when it switch to the live server, it doesn’t change the functioning as well.

Local domain

To do this, the first thing we will do is to include the name of our domain, so that our team will resolve it to our local ip. We will do this by editing the file hosts, which is located in the route /etc. As the hosts file belongs to the root of our system, we need to edit them as root. It can be done with a visual editor. We will do it from the console, with the vi (sudo vi /etc/hosts) command. We will see that the first line is like: localhost

We modify it to contain our new domain as well. To do this, we write it below, separated by a space. Remember that a domain can not have spaces. localhost
Once it is saved, we can check if when writing our new domain on the browser, it shows the same website as before. This is because it directs us to our own computer, to the port 80 (default), where Apache is listening.

Our web

The next thing we are doing is to create our first website: helloWorld.html. We go to the route where we can find the Apache webpages can read, which is /var/www/html. In this route, we create a subdirectory called helloworldProject, and inside of it, an html file called helloWorld.html, where we will write our first code:

<h1>Hello World, it's eHidra here.</h1>

Next, if we write the following route in our browser, we will see the result:


Redirecting the domain

As our domain is called helloworld, it doen’t look good to write helloworld in our url so many times. In fact, in the ideal case, the symple domain would redirect us to the website we want to show, without having to use subpaths or name of files. So, what we will do is to make the helloworld domain direct us straightaway to the website helloworld.html of our project, helloWorldProject.

To this aim, we are going to configure a virtual server (virtual host), as we explained before: creating a configuration file in the route /etc/apache2/sites-enabled. If we access this route, we can verify that there is a file called 000-default.conf. Which contains the necessary settings to make it work what we have done before. What we do is to duplicate this file and rename the copy to 000-helloworld.conf .

sudo cp 000-default.conf 000-helloworld.conf

Then we edit it, leaving it as follows:

<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/helloWorldProject
DirectoryIndex helloWorld.html
ErrorLog ${APACHE_LOG_DIR}/helloworld_error.log
CustomLog ${APACHE_LOG_DIR}/helloworld_access.log combined

With the property ServerName, we are indicating Apache that this rule is effective for all the requests with the same domain as ours. With the property DocumentRoot, we are indicating Apache the route where all the files of this website are located, and with the property DirectoryIndex, we are indicating which is the file that has to be automatically loaded when it is not specified. The last thing is to move the directory of our project to the parent directory, /var/www, so that every project emerges from a subdirectory of it.

sudo mv /var/www/html/helloWorldProject/ /var/www/helloWorldProject

To make these changes effective, we restart the apache2 service (sudo service apache2 restart), and then, we access…


Until now, what we have done is to set up a local web server, where we can host a static project (html), but we cannot create dynamic webpages yet. With this aim, we will use the programming language PHP. First, we install it:
$ sudo apt-get install php7.0 php7.0-curl php7.0-json snmp libapache2-mod-php7.0
This command installs the most common PHP packages. We have omitted a very common one, which is the mysql package, for being outside of the topic of the post. In contrast, the package we have installed is the php apache2. We will talk about it later in this post.

Now, we are going to turn our main page into dynamic, helloWorld.html. First, we are going to rename it to helloWorld.php. And we have to change the configuration file too 000-helloworld.con, so that the DirectoryIndex become helloWorld.php.

Then, we edit the helloWorld.php file, by introducing the following lines after the line <h4>Hello World…</h4>:


After that, we restart the apache2 service, and we access our domain again:

This is the information about the php we have installed. Meaning that it is working properly and that our server processes php dynamic pages.

Insulate the working environment

Now, we have done all of this on the routes and directories of each of our tools. So, we run the risk of having to go over all of these routes to collect everything we need, if at any time, we have to reinstall the operating system, or to create the environment in another device. We believe it is a good idea to put it all together on the same development route, which will stay in our partition of /home.

So, we execute the following instructions:

# We create directories both for sources and configurations
$ mkdir -p $HOME/develop/helloWorldProject/sources
$ mkdir -p $HOME/develop/helloWorldProject/configuration/apache/sites
# We move our portfolio with our source, to the new directory.
$ sudo mv /var/www/helloWorldProject $HOME/develop/helloWorldProject/sources
# We create a virtual link to the new sources directory, hosted in the route where apache reads
$ sudo ln -sfd $HOME/develop/helloWorldProject/sources /var/www/helloWorldProject
# We repeat the steps for the configuration
$ sudo mv /etc/apache2/sites-enabled/000-helloworld.conf $HOME/develop/helloWorldProject/configuration/apache/sites
$ sudo ln -sf $HOME/develop/helloWorldProject/configuration/apache/sites/000-helloworld.conf /etc/apache2/sites-enabled/000-helloworld.conf
# We change the owner user of the new project, each one his own
$ sudo chown -R usuario:grupo helloWorldProject
# We restart apache
$ sudo service apache2 restart

The only difference is that now we will have everything unified under the same directory in our /home partition. When we acess the domain, it should show the same page as before.

IDE: develop and debug

The last thing we are going to see in this post is the use of an IDE and a debugger. We will use PhpStorm and xdebug. We will start by installing the second one:

$ sudo apt-get install php-xdebug

After that, we copy the configuration file to the different PHP services.

$ sudo ln -sf /etc/php/7.0/mods-available/xdebug.ini /etc/php/7.0/cli/conf.d/20-xdebug.ini
$ sudo ln -sf /etc/php/7.0/mods-available/xdebug.ini /etc/php/7.0/apache2/conf.d/20-xdebug.ini

We edit the file /etc/php/7.0/mods-available/xdebug.ini, so that it looks as follows:

Next, we restart the apache2 service.

And we install the PhpStorm, which can be downloaded from the manufacturer’s website, Once we have downloaded it, we decompress it wherever we want. In our case, we have put it on the route $HOME/develop. We execute it, and from the main menu, we open the file of our project, in our case, $HOME/develop/helloWorldProject/sources.

Finally, we still have to configure PHP as an interpreter, the server that will be listened, and debug settings, as can be seen in the successive images:

When everything is configured, we open the helloWorld.php file in the editor, and we set a breakpoint on the call to the phpinfo() instruction. Then, we click on the top right of the editor, on the debug button, which will execute a call to our domain from the browser that we have configured, Firefox, in our case,.

We’ll see how the execution is stopped at the breaking point and we’ll be able to see the variables (if any), the call stack, etc.

In conclusion, we can say that we have set our Apache + PHP + xdebug environment. We hope that our post has been helpful. If you have questions, comments, suggestions… we will be aware. See you in our next tutorial.